有关css编写文字动态下划线
2021-04-20 22:27
标签：pre ack 需求 :hover col 代码 伪类 继承 划线 上面为html代码 接下来进行css的编写 以上代码就是这样，可以根据自己的需求来进行更改就可以了 有关css编写文字动态下划线 标签：pre ack 需求 :hover col 代码 伪类 继承 划线 原文地址：https://www.cnblogs.com/dy105525/p/12254783.htmldiv class="main_text">哈哈这就是我的小视频div>
.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時，伪类元素放大
}