文字装饰颜色线性渐变

Question

please how do I set a linear-gradient to a text-decoration-color property in css. I've been trying to implement it but it's not working

[what I actually wanted it to look like](https://i.stack.imgur.com/QDKhi.jpg)

Answer 1

 p{ background-image: linear-gradient(90deg,rgb(98,60,49)0,rgb(255,255,255) 100%); background-repeat: no-repeat; background-position-y: bottom; background-size:100% 15%; width:fit-content; }

 <p>This is text with a gradient decoration</p>

Something like this could work. Backgrounds should be your friend in this situation.

Answer 2

The best way is a ::before or just a div to do the same effect. Ex:

 .container { height: 100vh; display: flex; justify-content: center; align-items: center; } p { position: relative; font-size: 40px; } p::before { content: ""; position: absolute; top: 100%; width: 100%; left: 0; height: 5px; border-radius: 2px; background: linear-gradient(111.3deg, #9c27b0 9.6%, #00bcd4 93.6%); }

 <div class="container"> <p>I love CSS</p> </div>

Reference

Answer 3

To set a linear gradient as the 'text-decoration-color' in CSS, you can use the 'linear-gradient()' function as the value of the 'text-decoration-color property'.

Here is an example of how you can do this:

a {
  text-decoration: none;
  text-decoration-color: linear-gradient(to right, #ff0000, #ffff00);
}

This will apply a linear gradient that goes from red to yellow as the text-decoration-color for all 'a' elements.

Please note that the 'text-decoration-color' property is not supported in all browsers, so you may need to use a vendor prefix for full cross-browser compatibility. Here is an example of how you can use vendor prefixes:

a {
  text-decoration: none;
  -webkit-text-decoration-color: linear-gradient(to right, #ff0000, #ffff00);
  text-decoration-color: linear-gradient(to right, #ff0000, #ffff00);
}