Question

<span id="case1" class="comment>text text</span>
<span id="case2" class="suggestion">suggestion</span>
<span id="case3" class="comment>text text <span class="suggestion">suggestion suggestion</span> text text</span>

I would like span.comment to have a dotted red underline, span.suggestion to have a dotted yellow underline and span with both .comment and .suggestion to have a dotted red/yellow underline (one dot red, one dot yellow, one dot red etc.)

What should my CSS look like? Is it possible with text-decoration or border-bottom? Should I use transparent images?

Answer 1

Dotted underlines can be done with a border style:

span.comment {border-bottom: dotted 1px red;}
span.suggestion {border-bottom: dotted 1px yellow;}

However, the both yellow and red underline cant be done with only CSS. I suggest simplifying it to one color (i.e. orange)