JSFiddle - React, Tailwind, and code Playground

by jwpg018241

HTML

<div class="box">
<span class="yellow underline">©2019 Creative Studio®. All Rights Reserved
</span></div>

CSS

.box {width:100%;}

.underline {
  line-height: 1.2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: 700;
  background-image: linear-gradient(transparent calc(100% - 3px), #000 3px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.8s;
  color: #000;
  cursor: pointer;
}

.underline.yellow {
  background-image: linear-gradient(transparent 60%, #F8CD07 40%);
}
.underline:hover {
  background-size: 100% 100%;
}