Animation de soulignement CSS - Direction de lecture

Question

J'ai trouvé un code pour animer le soulignement d'un lien mais je voudrais être dans l'autre sens, comme nous le lisons (de gauche à droite) ce qui est en fait le contraire. Voici un 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

Modifier la déclaration de valeur de gauche et à droite.

.sliding-u-l-r-l-inverse:before à-dire consistent en des left:0 changement de right:0 et même dans d'autres pseudo selector :afterright:0-left:0. Cela change la direction et rend la ligne à partir de 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>

Answer 2

.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>