码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-02-03 11:47:46      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:pre   ack   需求   :hover   col   代码   伪类   继承   划线   

<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编写文字动态下划线

标签:pre   ack   需求   :hover   col   代码   伪类   继承   划线   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!