JSFiddle - React, Tailwind, and code Playground

by dkulahin

HTML

<a class="underlined_link" href="#">
  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia.</h2>
  <div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia.</span></div>
</a>

CSS

.underlined_link {
  text-decoration: none;
  display: inline;
}

.underlined_link h2,
.underlined_link div {
  display: inline;
  font-size: 20px;
  margin: 0;
  line-height: 35px;
  font-weight: normal;
  padding: 0;
}

.underlined_link h2 {
  color: transparent;
}

.underlined_link div {
  position: absolute;
  top: 10px;
  left: 8px;
}

.underlined_link:hover h2 {
  border-bottom: 1px solid #808080;
}