使用CSS渐变背景生成下划线来代替text-decoration: underline;

a{
    text-decoration: none;
    background: linear-gradient(#666,#666) no-repeat;
    background-size: 100% 1px; // 定义下划线的宽
    background-position: 0 1.15em; // 将下划线的位置固定在离文字0.15em距离处。
}

当碰到g和y之类的字母下半部时，可以使用和背景相同颜色的投影来覆盖一部分下划线，让下划线看起来像是碰到这些字母就断开了。

text-shadow: 0.1em 0 white,-0.1em 0 white;

下划线还可以是虚线。

background: linear-gradient(90deg,transparent 20%,#666 0) repeat-x; 
background-size: 1em 1px; 
// 可以通过transparent的百分比值和background-size大小来控制下划线的虚实之间的百分比和疏密。