正文

下划线css

IP云
IP云V管理员/4 阅读
08/31
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

/* <div class="text">header</div> */
.text {
/* 作用元素 */
display: inline-block;
position: relative;
padding: 10px 0;
}
.text:after {
/* 下划线伪元素 */
display: block;
content: '';
/* 控制下划线动画起始位置 */
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
/* 下划线样式 */
width: 0;
border-bottom: 1px solid #000;
transition: 0.5s;
}
.text:hover.text:after {
/* 控制下划线宽度 */
width: 100%;
}