Text decoration color linear gradient-CodePudding

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)

CodePudding user response：

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.

CodePudding user response：

The best way (in my opinion) 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 >
  <p>I love CSS</p>
</div>

Reference