css 的text-decoration可以实现文字下方的下划线,但是距离文字比较近,不是很好看,我们可以使用border-bottom来模拟这个效果
(inline元素虽然不可以设置margin-top和margin-bottom,但是可以设置padding值和border)
body{
margin: 0;
}
div {
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
属性的颜色
background-color:currentColor; css3 ie9+
就是当前的背景颜色由color决定
在iOS Safari浏览器下(iOS8)下,currentColor
还是有一些bug的,例如伪元素hover时候,background:currentColor
的背景色不会跟着变化
参考来自:http://www.zhangxinxu.com/wordpress/2016/11/css-text-decoration-underline-skip-override/