标题下添加动态下划线

标题下添加动态下划线

在美化小工具这里美化了一下h3标题下的下划线 .widget h3{font-size:18px;color:#282828;font-weight:600;margin:0;text-transform:uppercase;padding-bottom:15px;margin-bottom:25px;position:relative;} .widget h3:after{content:"";background-color:#28282...

在美化小工具这里美化了一下h3标题下的下划线

.widget h3{font-size:18px;color:#282828;font-weight:600;margin:0;text-transform:uppercase;padding-bottom:15px;margin-bottom:25px;position:relative;}
.widget h3:after{content:"";background-color:#282828;left:1px;width:50px;height:2px;bottom:-2px;position:absolute;-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;-o-transition:0.5s;transition:0.5s;}
.widget:hover h3::after{width:70px;}

样式

测试效果

测试标题

被西风吹尽,了无尘迹。

原文链接:https://www.baijiascw.com/25523.html,转载请注明出处。

0

评论0

蓝奏云下载地址部分地区无法打开,请将“lanzous.com”更改为“lanzoui.com”即可打开下载地址。站内大部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除! 心愿单
没有账号? 注册  忘记密码?

社交账号快速登录