有关css编写文字动态下划线

<div class="main_text">哈哈这就是我的小视频</div>

上面为html代码

接下来进行css的编写

.main_text{
position:relative;   //给其一个相对定位
}
.main_text::after{   //我们要对其使用伪类元素
  content："";
  width:100%;
  height:1px;
  position:absolute;
  left:0;
  bottom:0;
  background-color:#000;  //这里颜色可以自己设定，也可以设置继承和文字一样的颜色
  transform:scale(0);      //刚开始是没有放大的
  transform-origin:left bottom; //这个属性必须要在transform之后，他定义的是一个基点，具体的需要自己百度去看一看，我们这里定义的是在左下角  transition:all 0.4s;   //给其一个动画时间
}
.main_text:hover::after{
     transform:scale(1);  //当元素被hover時，伪类元素放大
}

以上代码就是这样，可以根据自己的需求来进行更改就可以了

原文地址：https://www.cnblogs.com/dy105525/p/12254783.html