JSFiddle - React, Tailwind, and code Playground

by Clemens Himmer

HTML

<div class="parent">
  <span>Want to work on </span>
  <span class="child hvr-underline-from-left ">challenging,</span>
  <span class="child hvr-underline-from-left ">interesting,</span>
  <span> and </span>
  <span class="child hvr-underline-from-left"> innovative projects ?</span>
</div>

CSS

.parent {
  min-height: 200px;
  min-width: 200px;
  border: 1px solid red;
}

.parent span {
  /* Set all text to the bottom*/
  vertical-align: text-bottom;
}

.child {
  display: block;
}

.parent:hover .hvr-underline-from-left {
  display: inline-block;
}


/* Underline From Left */

.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.hvr-underline-from-left:before {
  content: "";
  height: 4px;
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #2098d1;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.parent:hover .hvr-underline-from-left:before,
.parent:focus .hvr-underline-from-left:before,
.parent:active .hvr-underline-from-left:before {
  right: 0;
}