How to create double, dotted underline for text in css

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 ?

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/

You need to use at least two HTML elements to achieve this:

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

Both .outer and .inner should have the same dotted bottom border, but .outer should have a few pixels of padding-bottom as well.

See an example here.

Definitely don't need two elements to do this...

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

Try adding a very thin div below it and set the border top or border bottom 1px dotted aswell. Then you can play with the CSS accordingly to make it fit and make the double dotted line you want.

And no it is not possible to do it on the same element you will have to do it from the outside.