重叠的文字装饰答案

【问题标题】：Overlapping text decorations重叠的文字装饰
【发布时间】：2010-08-01 02:30:35
【问题描述】：

<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 应该是什么样的？是否可以使用文本装饰或边框底部？我应该使用透明图片吗？

【问题讨论】：

这里没有问题。问题以问号 (?) 结尾。这是“请发送代码”
我不知道如何解决这个问题。我希望至少有人能引导我朝着正确的方向前进。

标签： css

【解决方案1】：

虚线下划线可以使用边框样式：

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

但是，黄色和红色下划线不能仅使用 CSS 来完成。我建议将其简化为一种颜色（即橙色）

【讨论】：

【解决方案2】：

使用嵌套的<span>s，您可以创建具有交替颜色的虚线边框：

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

不过，用点做起来会有点困难。

【讨论】：