css伪元素实现下划线
程序员文章站
2023-12-24 20:22:15
...
前言:
css伪元素实现下划线效果,用一个border-bottom+伪元素实现双重下划线效果
效果图:
实现代码:
.titleT{
position: relative;
font-size: 28px;
width: 112px;
height: 44px;
line-height: 40px;
text-align: center;
border-bottom:2px solid #5A8BFF; //第一层下划线
margin:63px auto 40px;
}
.titleT:after {//伪元素实现第二层
content: " ";
position: absolute;
left: 0;
bottom: -9px;
width: 100%;
height: 1px;
border-top: 1px solid #5A8BFF;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}