CSS - 具有样式和颜色的多种文本装饰

Question

red wavy underline我想用和blue dashed overlineusing来制作文本text-decoration。
这是我的代码：（仅在 Mozilla Firefox 中工作）（不起作用，因为仅显示上划线）

span {
  font-size: 40px;
  text-decoration: underline wavy red;
  text-decoration: overline dashed blue;
}

<span> Some Text </span>

我怎样才能仅使用 来达到这种效果text-decoration？（我知道，它只能在 Mozilla Firefox 中运行）
感谢您的帮助。

Answer 1

一个 css 属性不能同时有两个值。

解决方法：将文本包装在另一个文本中span，并向每个范围添加单独的文本装饰：

span {
  font-size: 40px;
}

.wavy {
  text-decoration: underline wavy red;
}

.dashed {
  text-decoration: overline dashed blue;
}

<span class="wavy">
  <span class="dashed">Some Text </span>
</span>