JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <p class="underlined">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi deleniti ad nam, reiciendis ullam! Animi at vel nulla perferendis dolorem, ad a, magnam eum libero facere nemo itaque, explicabo accusantium!</p>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #ff503d;
}

.wrap {
  width: 70%;
  margin: auto;
}

.underlined {
  display: inline;
  font-size: 2rem;
  color: #fff;
  background-image: linear-gradient(to top, #e2a402 40%, transparent 40%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 500ms linear;
}

.wrap:hover .underlined {
  background-size: 100% 100%;
}