CSSのアンダーラインアニメーション - 読み取り方向

Question

リンクの下線をアニメートするコードが見つかりましたが、私は実際には反対である（左から右に）読むので、私は他の方向になりたいと思います。ここで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

は変更左右の値の宣言です。

すなわち、他のpseudo selector :afterright:0でright:0と同じにleft:0にleft:0変化から成る.sliding-u-l-r-l-inverse:before。方向が変わり、行が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>