css渐变实现多行文本下划线动画

给多行文本做一个鼠标移动上去,加一个下划线动画.

html

 <h1 class="title">
    <span class="line-hover">使用 CSS Grid(网格) 布局来创建一个超酷的图像网格，它会根据屏幕的宽度改变列的数量，以实现响应式布局。</span>
</h1>

复制代码

css

.title{
        width: 40vw;
        margin: 0 auto;
        line-height: 1.5;
        color: #333;
        font-size: 2vw;
      }
      .line-hover{
         background-image: linear-gradient(#f00 0%, #f00 100%);
         background-repeat: no-repeat;
          background-size: 0px 2px;
          background-position: 0px 95%;
          transition: background-size 0.25s;
          padding: 0.1% 0px;

      }
      .title:hover .line-hover{
        background-size: 100% 2px;
         transition: background-size 0.25s ;
      }
复制代码