实现文字下划线 ---模拟text-decoration

css 的text-decoration可以实现文字下方的下划线，但是距离文字比较近，不是很好看，我们可以使用border-bottom来模拟这个效果

（inline元素虽然不可以设置margin-top和margin-bottom，但是可以设置padding值和border）

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属性的颜色

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/