css实现从左到右出现的下划线

项目场景：

项目要求在文章的标题出现从左到右出现的的下划线，百度没有找到了太适合本项目的方法。在此进行我的解决方法。

---

 

 

问题描述

提示：

css的transition对text-decoration没有什么效果

text-decoration: underline;
transition: text-decoration;

---

原因分析：

个人认为transition是只对宽高变化等引起形变的变化有反应

例如：width,height,background等

---

解决方案：

所以我使用了background-size属性来引起变化，代码如下：

    a{
    display: inline;
    text-decoration: none;
    background: linear-gradient(to right, currentColor 0%, currentColor 100%);
    background-size: 0 2px;
    background-position: 0 95%;
    transition: background-size 0.5s linear 0s;
    background-repeat: no-repeat;
    color: black;
    }
  a:hover{
    background-size: 100% 2px;
    outline: 0;
    color: blue;
    
  }