text-decoration dotted / dashed underline
2010-01-16 @ 14:32Problem
How do I set text-decoration: underline to dotted or dashed?
Solution
Don’t use text-decoration at all. Use border-bottom on the anchor tag instead.
Example
a {
border-bottom: 1px dotted #ba0000;
}
a:hover {
border-bottom: 1px solid #ba0000;
}
Change ”dotted” to ”dashed” for a dashed underline.
A link with above example will look like this.
Works with (browsers)
- Full support – Chrome, Firefox, Internet Explorer, Opera, Safari
2009-08-24 @ 12:32 e m
Hi, at the page ‘http://www.devdevote.com/2009/07/25/text-decoration-dotted-dashed-underline/’ the link “works with … firefox” points to Apple/Safari… hope it’s really only a mistake.
Cheers.
2010-01-17 @ 12:38 e m
It’s a mistake. I’ve fixed the issue now. Thanks for letting me know.
2010-06-24 @ 3:44 e m
It has also been suggested that you first remove any text decoration (such as underline) before you define a bottom border. See the tips here:
http://webdesign.about.com/od/beginningcss/a/change_link_underline_styles.htm
2010-09-17 @ 4:01 f m
I,ll try this again see if it posts. I am using 3.0 and have not been able to get and sitemap plugin to work with permalinks set at /%postname%/ can anyone help
2011-01-18 @ 8:59 f m
IE6 requires display:inline-block; to be placed in the links in order to show the bottom border.
2012-03-03 @ 7:47 f m
Yeah. Its nice trick.
@Alex let forget IE6 plz.
2012-03-17 @ 1:47 e m
What about pictures? If I use this, I get dotted underlines under a picture, if it’s linked. Can I remove these, without giving the anchor-tag a specific class?
2012-10-24 @ 4:02 f m
Hi Tobi,
You can remove all the images borders inside of a link tag by doing the following
a img{
border: none;
}