How to create double, dotted underline for text in css

Question

How can we create two-line underlines in CSS? I am using the border-bottom property.

border-bottom: 1px dotted #oof

But only a single point underline appears. How can we create a double underline? Is it possible?

Answer 1

For this you need to use at least two HTML elements:

 <span class="outer"> <span class="inner">Your text here.</span> </span> 

Both .outer and .inner should have the same bottom border, but .outer should also have multiple padding-bottom pixels.

See an example here .

Answer 2

To save yourself with extra markup, you can apply an extra border using the after pseudo-element. Check the violin! - 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, it might be worth checking out Chris Coyer's article on browser support - http://css-tricks.com/9189-browser-support-pseudo-elements/

Answer 3

Two elements are definitely not needed for this ...

 .doubleUnderline{ border-bottom: 3px double; } 

Answer 4

Try adding a very thin div below it and set the top or bottom border of the 1px border. Then you can play with CSS so that it matches and makes the desired double dashed line.

And no, this cannot be done on the same element that you have to do from the outside.