【CSS】改良的链接下划线

2019年5月13日 158次阅读 来源: Rabbit_svip

《【CSS】改良的链接下划线》 微信订阅号：Rabbit_svip

《【CSS】改良的链接下划线》 微信订阅号：Rabbit_svip

此方法只适用于背景为纯色的情况下！！！

HTML代码

<a href="#">javascript</a>

CSS代码

a {
    color: hotpink;
    text-decoration: none;
    text-shadow: 
        0.05em 0 0 #fff,
        -0.05em 0 0 #fff,
        0.1em 0 0 #fff,
        -0.1em 0 0 #fff,
        0 0.1em 0 #fff,
        0 -0.1em 0 #fff;
        background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
        background-repeat: repeat-x;
        background-position: bottom 0.05em center;
        background-size: 100% 0.05em;

}

因为下划线往往直接放在字体基线下面，会穿过像字母g、j、y等字母降部，降低了链接文本的可读性。理想的情况下，下划线应该留一点空间，不跟字符相交。

上面的代码是利用了文字阴影（这里的背景色是白色，所以文字阴影也设置成白色），让文字外有一个“保护层”。再通过设置渐变背景色的方法实现自定义下划线。

这种方法的好处：
下划线的颜色、位置都可以自定义调节，甚至可以把下划线做成渐变色。
下划线的厚度可以调节。
下划线的位置可以调节。

对于不支持渐变背景的旧浏览器，降级方案是没有下划线。这种方法不会影响整体布局。

缺点：
文字的父级背景只能是纯色的情况下才能使用这种方法。

HTML与CSS 目录：HTML与CSS

上一篇：【CSS】不规则阴影

    原文作者：Rabbit_svip
    原文地址: https://www.jianshu.com/p/53ee635d9cf1
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞