实现文字下划线 ---模拟text-decoration
css 的text-decoration可以实现文字下方的下划线,但是距离文字比较近,不是很好看,我们可以使用border-bottom来模拟这个效果
(inline元素虽然不可以设置margin-top和margin-bottom,但是可以设置padding值和border)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | body{ margin: 0; } div { width: 500px; margin: 50px auto; } span { padding-bottom:2px; color: red; border-bottom:1px solid; } <div> <span>下划线</span> </div> |
设置border时,建议不要设置border的颜色,这样border默认就是文字的颜色,特别是在a标签中,hover时文字颜色改变,就可以实现下划线与文字颜色保持一致而不需要设置border的颜色
text-decoration目前浏览器支持不较好的属性:
text-decoration-line:none underline overline line-through
text-decoration-style:solid double dotted dashed wavy inherit
text-decoration-color
支持多值:
text-decoration: underline overline;
支持缩写:
text-decoration: underline wavy red;
border,text-shadow
边框色默认就是color
属性的颜色
currentColor
background:currentColor
参考来自:http://www.zhangxinxu.com/wordpress/2016/11/css-text-decoration-underline-skip-override/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步