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>

像这样的事情可能会起作用。背景在这种情况下应该是你的朋友。

最好的方法（在我看来）是一个::before或只是一个div做同样的效果。

.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