CSS underline animation - Reading direction

Question

I found a code to animate the underline of a link but I would like to be on the other direction, as we read (left to right) which is actually the opposite. Here is a JSFiddle

.sliding-u-l-r-l-inverse {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.sliding-u-l-r-l-inverse:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transition: width 0s ease;
}

.sliding-u-l-r-l-inverse:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: blue;
  transition: width .8s ease;
}

.sliding-u-l-r-l-inverse:hover:before {
  width: 0%;
  background: blue;
  transition: width .8s ease;
}

.sliding-u-l-r-l-inverse:hover:after {
  width: 0%;
  background: transparent;
  transition: width 0s ease;
}

<div class="sliding-u-l-r-l-inverse">
  I want it to slide on the other direction.
</div>

Answer 1

Change the value declaration of left and right.

i.e. .sliding-u-l-r-l-inverse:before consist of left:0 change that to right:0 and same in other pseudo selector :after right:0 to left:0. This changes the direction and makes line to start from left to right.

.sliding-u-l-r-l-inverse {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.sliding-u-l-r-l-inverse:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transition: width 0s ease;
}

.sliding-u-l-r-l-inverse:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: blue;
  transition: width .8s ease;
}

.sliding-u-l-r-l-inverse:hover:before {
  width: 0%;
  background: blue;
  transition: width .8s ease;
}

.sliding-u-l-r-l-inverse:hover:after {
  width: 0%;
  background: transparent;
  transition: width 0s ease;
}

<div class="sliding-u-l-r-l-inverse">
  I want it to slide on the other direction.
</div>