JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">If I am an electricity consumer, do I need to get a special approval from the authorities to get AI installed?</a>

CSS

body {
  font-size: 40px;
  line-height: 1;
}

a {
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline;
  color: #999999;
  transition: 0.3s ease;
  background:  no-repeat 0 100%;
  background-image: linear-gradient(to right, #f74e02, #bc180d);
  background-size: 0 2px;
}

a:hover {
  color: black;
  background-size: 100% 2px; 
}