Menu
How can we create double dotted underline in CSS ? I use border-bottom property.
border-bottom: 1px dotted #oof
But only single dotted underline appears. How can we create double underline ? Is it possible ?
958
Adding a dotted or double underline The text-decoration property does not have a “double” or “dotted” value. Instead, you can use the border-bottom property to add double or dotted underlining. You can remove a link's default underline by setting the text-decoration proeprty to “none.”
The property text-decoration-line is used to underline the text. This property has three values that are overline, underline, or line-through. So, the value underline is used to underline the text in CSS. This value draws the underline beneath the inline text.
Change the underline to dots with the border-bottom style property a { text-decoration: none; border-bottom:1px dotted; }. Change the underline color by typing a { text-decoration: none; border-bottom:1px solid red; }. Replace solid red with another color.
To save yourself using extra markup you could apply the extra border using the 'after' pseudo element. Check out the fiddle! - http://jsfiddle.net/sg2My/38/
.elem {
border-bottom:1px dotted #f00;
/* padding-bottom:1px;*/
position:relative;
}
.elem:after {
border-bottom:1px dotted #000;
content:'';
left:0;
position:absolute;
bottom:-3px;
width:100%;
}
Also, may be worth checking Chris Coyiers article on browser support - http://css-tricks.com/9189-browser-support-pseudo-elements/
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
