文字下滑线渐变效果

实现效果

实现代码

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  <a
    >Mollitia nostrum placeat consequatur deserunt velit ducimus possimus
    commodi temporibus debitis quam</a
  >, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium
  vero.
</p>

p {
  width: 600px;
  font-size: 24px;
  color: #666;
}

a {
  background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
  background-size: 0 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: 1s all;
  color: #0cc;
}

a:hover {
  background-size: 100% 3px;
  color: #000;
}