CSS

Question

我想用 red wavy underline 和 blue dashed overline 使用 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>

Answer 2

试试这个：

span {
    position: relative;
    text-decoration: underline wavy red;
    border-top: 2px dashed blue;
}

<span> Some Text </span>

您的评论在这里：

span {
    position: relative;
    text-decoration: underline wavy red;
}

span:after {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    content: '';
    border-top: 2px solid blue;
    top: 10px;
}

<span> Some Text </span>

Answer 3

文本需要跨越多行，即使是标题也需要在智能手机上使用窄视口。
这是一个用线性渐变完成的多线解决方案（好吧，其中 2 个用于重现破折号）：

Codepen in Scss（简单地为 font-size 和 line-height 使用 2 个变量）

span {
  font-size: 40px;
  line-height: 1.5;
  text-decoration: underline wavy red;
  /*text-decoration: overline dashed blue;*/
  background-image:
    linear-gradient(to right, white 0, white 50%, transparent 50%, transparent 100%),
    linear-gradient(to bottom, blue 0, blue 1px, transparent 1px, transparent 100%);
  background-size:
    8px 100%,
    100% 60px;
  background-position: left top, left top;
  background-repeat: repeat, repeat;
}

<p><span> Some Text </span></p>

<p><span>Also<br>multiline</span></p>

可以自由修改破折号（它是透明和白色之间的渐变，大小随意）

Answer 4

您可以使用 text-decoration-line 指定多行。你会认为你可以为每一行指定不同的颜色和不同的样式，但是，这是行不通的，你可以在这里看到：

span {
  /* This does not work! */
  text-decoration-line: underline overline;
  text-decoration-style: wavy dashed;
  text-decoration-color: red blue;
}

<span>Some Text</span>

MDN 是这么说的：

CSS does not provide a direct mechanism for specifying a unique color for each line type. This effect can nevertheless be achieved by nesting elements, applying a different line type to each element (with the text-decoration-line property), and specifying the line color (with text-decoration-color) on a per‐element basis.

所以这是使用嵌套的解决方案：

.parent {
  text-decoration: underline wavy red;
}
.child {
  text-decoration: overline dashed blue;
}

<span class="parent"><span class="child">Some Text</span></span>

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

CSS - Multiple text-decorations with style and color

html

text-decorations