How can I make border go from left to right on hover and from left to right after hover?

Issue

I was wondering if I could make this border that goes from left to right on hover go from left to right after hovering as well. I have got this right now and the border goes back right to left after I hover. How can I do this?

Here is what I have right now:

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

h1.fromLeft:after {
  transform-origin: 0% 50%;
}

<h1 class="fromLeft">Expand from left</h1>

Solution

Is this what you meant? An underline coming in from left-to-right and leaving from left-to-right.

By aligning to the left when increasing and aligning to the right before reducing its size, we create the illusion that the background (the line) moves from left-to-right.

The background repeats across lines, so the animation works even for multiline elements.

h1 {
  position: relative;
  margin: 0;
  color: #666;
  display: inline-block;
  text-transform: uppercase;
}

.from-left {
  background-image: linear-gradient(to bottom, transparent .9lh, red .9lh);
  background-repeat: no-repeat;
  background-position-x: right;
  background-size: 0%;
  transition: background-size .15s;
}
.from-left:hover {
  background-size: 100%;
  background-position-x: left;
}

<h1 class="from-left">Expand from left</h1>

Answered By - Oskar Grosser