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.”

Screenshot

Code

CSS

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

.dottedUnderline { border-bottom: 1px dotted; }

Usage

<p><span class="doubleUnderline">text text</span></p>

<p><span class="dottedUnderline">text text</span></p>

Example

Click here to see an example.