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

Question

我现在有这个

 p { text-decoration: underline overline red; } 

 <p> This is some text </p> 

在这里，我想为上overline和underline设置不同的颜色。

这有可能吗？

Answer 1

将一个span放在p ，然后可以在跨度的上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>