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

Question

I have this currently

 p { text-decoration: underline overline red; } 

 <p> This is some text </p> 

Here, I want to have different colors for the overline and underline .

Is this possible at all?

Answer 1

Put one span inside p and then you can set different color on span's 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

As far as I know you are only able to set text-decoration-color once and all decorations will have the same color. The syntax you are using as well will only work in Firefox currently. Other browsers will require prefixes like -webkit and may require experimental features be enabled in the browser.

A far more universally compatible solution would be to apply a border to your text. You will be able to achieve the effect you want and it will be compatible everywhere.

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

 <p>Testing</p>