CSS-具有样式和颜色的多个文本装饰 [英] CSS - Multiple text-decorations with style and color

问题描述

我想使用用红色波浪下划线和蓝色虚线上划线制作文本文本装饰。

这是我的代码：（仅在Mozilla Firefox中有效）（无效，因为仅显示上划线）

I want to make a text with red wavy underline and blue dashed overline using text-decoration.
This is my code: (working only in Mozilla Firefox) (don't works, because display only overline)

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

<span> Some Text </span>

如何仅使用来实现这种效果文字装饰？ （我知道，它只能在Mozilla Firefox中运行）。

感谢您的帮助。

How can I do that effect using only text-decoration? (I know, it will work only in Mozilla Firefox)
Thanks for help.

推荐答案

您可以

解决方法：将您的文本包装在另一个 span 中，然后为每个跨度添加单独的文本装饰：

Workaround: wrap yout text in another span and add separate text-decoration to each 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>

这篇关于CSS-具有样式和颜色的多个文本装饰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！