JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div id="title">Lorem ipsum dolor sit amet</div>

CSS

body {
  margin-top: 20px;
  text-align: center;
  font-family: Open Sans;
  font-size: 2em;
}

#title {
  position: relative;
  display: inline-block;
  font-weight: bold;
}

#title:after {
  width: 0;
  height: 2px;
  background: black;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(50%);
  left: 0;
  content: "";
  transition: width .3s;
}

#title:hover:after {
  width: 100%;
}