CODEWITHSUNDEEP
cssanimationcss-transitionsunderline
Léo Durand
Léo Durand

Reputation: 213

CSS underline animation - Reading direction

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>

Upvotes: 1

Views: 325

Answers (2)

frnt
frnt

Reputation: 8795

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>

Upvotes: 1

sol
sol

Reputation: 22949

.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; /* changed from 'right' */
  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>

Upvotes: 1

Related Questions