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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

上面为html代码

接下来进行css的编写

.main_text{

position:relative;   //给其一个相对定位

}

.main_text::after{   //我们要对其使用伪类元素

  content："";

  width:100%;

  height:1px;

  position:absolute;

  left:;

  bottom:;

  background-color:#000;  //这里颜色可以自己设定，也可以设置继承和文字一样的颜色

  transform:scale(0);      //刚开始是没有放大的

  transform-origin:left bottom; //这个属性必须要在transform之后，他定义的是一个基点，具体的需要自己百度去看一看，我们这里定义的是在左下角
  transition:all 0.4s;   //给其一个动画时间

}

.main_text:hover::after{

     transform:scale(1);  //当元素被hover時，伪类元素放大

}