<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時，，伪类元素放大 }

以上代码就是这样，可以按照本身的需求来进行变动就可以了

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