有关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時,伪类元素放大 }
以上代码就是这样,可以根据自己的需求来进行更改就可以了
相关推荐
sunshineboyleng 2020-07-08
impress 2020-05-11
yaodilu 2020-04-30
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
福叔 2020-04-11
zjuwangleicn 2020-03-08
冰蝶 2020-03-01
somboy 2020-02-29
zengni 2020-02-23
wangjie 2020-02-22
tianzyc 2020-02-19
冰蝶 2020-02-16
lanzhusiyu 2020-01-12
MaureenChen 2020-01-01
jiedinghui 2019-12-27
zhanghao 2019-12-20
bertzhang 2019-12-14
impress 2019-12-13