CSS3技巧31：简单而实用的CSS导航下划线动画效果2

之前写了一篇文章，探讨了CSS导航链接的下划线动画效果：

CSS3技巧30：简单而实用的CSS导航下划线动画效果_九天翔龙的技术博客-CSDN博客

除了中间的拓展变化，还可以怎么做呢？

今天看到了一个从左到右的效果，也挺有意思的。

 思路跟之前的差不多，也是利用伪标签实现下划线动画。

但是，在伪标签的left，right属性使用了 auto 值，让浏览器自动判断。

具体代码如下：

HTML：

<a href="#" class="a1">测试内容</a>

CSS：

a{
    color: #000;
    font-size: 16px;
    text-decoration: none;
    line-height: 34px;
    position: relative;
    display: inline-block;
}
.a1::before{
    content: "";
    display: block;
    position: absolute;
    height: 1px;
    background: #f30;
    width: 0;
    left:auto;  /* left 和 right 的值是关键 */
    right:0;
    bottom:0;
    transition:all 0.5s;
}
.a1:hover::before{
    width: 100%;
    left:0;  /* left 和 right 的值是关键 */
    right:auto;
}

嗯~越来越觉得CSS有意思了