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>，您可以使用交替颜色创建虚线边框：

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

然而，用点做起来会有点困难。

重叠文字装饰

2 个答案: