Наложение текстовых украшений

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>

Я бы хотел, чтобы span.comment имел пунктирное красное подчеркивание, span.suggestion - пунктирное желтое подчеркивание, а span с .comment и .suggestion - пунктирное красно-желтое подчеркивание (одна точка красного одна точка желтая, одна красная точка и т. д.)

Как должен выглядеть мой CSS? Возможно ли это с текстовым оформлением или бордюром? Стоит ли использовать прозрачные изображения?

Answer 1

Подчеркнутые точками подчеркивания могут быть выполнены в стиле рамки:

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

Однако и желтое, и красное подчеркивание не могут быть выполнены только с помощью CSS. Я предлагаю упростить его до одного цвета (т.е. оранжевого)

Answer 2

Используя вложенные <span> s, вы можете создать пунктирную рамку с чередующимися цветами:

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

Хотя с точками было бы немного сложнее.