使用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大小来控制下划线的虚实之间的百分比和疏密。
网友评论