如何在 css 中为下划线和上划线设置不同的颜色？

Question

我目前有这个

p {
  text-decoration: underline overline red;
}

<p>
This is some text
</p>

在这里，我想为 overline 和 underline 使用不同的颜色。

这可能吗？

Answer 1

在p里面放一个span然后你可以在span的overline.

上设置不同的颜色

p {
  text-decoration: blue underline ;
}
span {
  text-decoration: red  overline;
}

<p><span>This is some text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ut iusto optio, similique iure. Autem facilis, eveniet vel ea mollitia ad obcaecati dignissimos nisi, reiciendis odio voluptas, aliquid iure voluptatibus.</span></p>

Answer 2

据我所知，您只能设置 text-decoration-color 一次，所有装饰物的颜色都相同。您使用的语法目前也只能在 Firefox 中使用。其他浏览器将需要像 -webkit 这样的前缀，并且可能需要在浏览器中启用实验性功能。

一个更加普遍兼容的解决方案是为您的文本应用边框。定能达到你想要的效果，处处兼容。

p {
  border-top: 1px solid blue;
  border-bottom: 1px solid red;
  display: inline-block;
}

<p>Testing</p>

如何在 css 中为下划线和上划线设置不同的颜色？

How to have different color for underline and overline in css?

html

css

text-decorations