悬停时彩色下划线从中间向两端画出
← 返回 文字 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .ud{text-align:center;font-size:36px;font-weight:700;margin:64px 0;color:#fff;position:relative;cursor:pointer}
.fx .ud::after{content:"";position:absolute;left:50%;bottom:-10px;width:0;height:4px;background:linear-gradient(90deg,#f778ba,#4a9eff);transition:all .4s ease;border-radius:2px}
.fx .ud:hover::after{width:100%;left:0}<div class="fx">
<div class="ud">悬停画下划线</div>
</div>