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

更改左右的值声明。

即.sliding-u-l-r-l-inverse:before包括将其更改为right:0left:0，并在其他pseudo selector :afterright:0中将其更改为left:0。这会改变方向并使线从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>