Overlapping text decorations

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)

Answer 2

Using nested <span>s you can create a dashed border with alternating colors:

<span style="border-bottom: 3px solid #ff0">
  <span style="border-bottom: 3px dashed #f00">
    Lorem ipsum dolor sit amet...
  </span>
</span>

It would be a bit harder to do with dots, though.