解决文字和text-decoration:underline下划线重叠问题

CSS text-decoration:underline可以给内联文本增加下划线，但是，如果对细节要求较高，就会发现，下划线经常会和中文文字的下边缘搞在一起，英文的话甚至直接穿越，看起来就比较香菇蓝瘦。

解决方法：

1.使用border-bottom属性模拟

a {
    text-decoration: none;
    border-bottom: 1px solid;
}

如果觉得border-bottom模拟的下划线还是和文字走得太近，我们可以使用padding-bottom再撑开点距离，例如：

a {
    text-decoration: none;
    border-bottom: 1px solid;
    padding-bottom: 5px;
}

注意，使用 border-bottom 模拟下划线的时候， border-color 最好缺省，这样就会使用文字的 color 颜色作为边框色，这样，鼠标 hover 的时候，下划线会自动和文字一起变色，类似下图效果：

2.使用box-shadow属性模拟

a {
    text-decoration: none;
    box-shadow: 0 1px;
}

同样，建议颜色值缺省，使用color属性的颜色值。

效果基本上和border-bottom如出一辙

相比border-bottom属性，box-shadow的优势在于，即使我们把内联元素设置成display:inline-block，生成的下划线也不会对垂直对齐或者布局产生影响，但，如果是border-bottom，会增加元素的尺寸，可能就会影响元素的排列。

但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能实线，不能虚线。

原文链接：http://www.zhangxinxu.com/wordpress/2016/11/css-text-decoration-underline-skip-override/