/* <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%; ???????}下划线css
原文地址：https://www.cnblogs.com/dkplus/p/8973911.html