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

Question

我目前有这个

＆＃13;

＆＃13;

p {
  text-decoration: underline overline red;
}

＆＃13;

<p>
This is some text
</p>

＆＃13;

＆＃13;

＆＃13;

在这里，我希望overline和underline有不同的颜色。

这有可能吗？

Answer 1

将一个span放入p内，然后您可以在跨度overline上设置不同的颜色。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

更普遍兼容的解决方案是在文本中应用边框。你将能够达到你想要的效果，它将在任何地方兼容。

＆＃13;

＆＃13;

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

＆＃13;

<p>Testing</p>

＆＃13;

＆＃13;

＆＃13;