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.”
.doubleUnderline { border-bottom: 3px double; }
.dottedUnderline { border-bottom: 1px dotted; }
<p><span class="doubleUnderline">text text</span></p>
<p><span class="dottedUnderline">text text</span></p>