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

最新推荐文章于 2024-06-23 04:29:52 发布

长安古意

最新推荐文章于 2024-06-23 04:29:52 发布

阅读量4.4k

点赞数

分类专栏： css样式

本文链接：https://blog.csdn.net/aiyishengyishi/article/details/53765474

版权

css样式专栏收录该内容

7 篇文章 0 订阅

订阅专栏

纸上得来终觉浅，绝知此事要躬行
之前看了张鑫旭大神的一篇文章，今天做项目终于用到了，决定记录一下，防止忘记，原文链接如下：
http://www.zhangxinxu.com/wordpress/2016/11/css-text-decoration-underline-skip-override/

一.在项目中用到了border-bottom的属性

html

<a class="mailStyle" href="mailto:123456@qq.com">123456@qq.com</a></span>

css

.mailStyle{
    margin-left:10px;
    display: inline;
    color:#999999;
    border-bottom: 1px solid;
    padding-bottom: 3px;
    text-decoration:underline;
}

注：如果不对border设置颜色，边框颜色将会和字体颜色一致，在a触发hover等，下划线也会跟着文字一起变色

二.其他的一些方法

1.text-decoration-skip指定覆盖关系
不足：

此图来自张鑫旭博客截图
注：截图来自张鑫旭博客

2.使用box-shadow属性模拟

.class2{
    text-decoration: none;
    box-shadow: 0 1px;
    padding-bottom:5px;
}

3.background-image属性模拟

.class3{
    text-decoration: none;
    background-image: linear-gradient(to top,currentColor,currentColor 1px,transparent 1px);
    padding-bottom:5px;
    }
.class3:hover{
    text-decoration: none;
    background-image: linear-gradient(to top,currentColor,currentColor 1px,transparent 1px);
    padding-bottom:5px;
}

图片来自张鑫旭博客
注：截图来自张鑫旭博客

4.还有使用SVG滤镜处理，使用canvas实现（著名的Underline.js）的方法，原博主已经做了详述，本文不再做纪录

三.完整代码

<!doctype html>
<html>
<head>
    <meta charset='utf-8' />
    <title>模拟a表签下划线</title>

</head>
<style type="text/css">
    div{
        padding:5px;
    }
    a{
        /*text-decoration: none;*/
        font-size: 24px;
        color:#000;
    }
    a:visited,a:hover,a:active{
        /*text-decoration: none;*/
        color:pink;
    }
    .class1{
        text-decoration: underline;
        text-decoration-skip: ink;
    }
    .class2{
        text-decoration: none;
        box-shadow: 0 1px;
        padding-bottom:5px;
    }
    .class3{
        text-decoration: none;
        background-image: linear-gradient(to top,currentColor,currentColor 1px,transparent 1px);
        padding-bottom:5px;
    }
    .class3:hover{
        text-decoration: none;
        background-image: linear-gradient(to top,currentColor,currentColor 1px,transparent 1px);
        padding-bottom:5px;
    }
</style>
<body>
    <div><a href="1111" class="class1">text-decoration-skip指定覆盖关系</a></div>
    <div><a href="1111" class="class2">box-shadow属性模拟</a></div>
    <div><a href="1111" class="class3">background-image属性模拟</a></div>
</body>
</html>

长安古意

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决文字和text-decoration:underline下划线重叠问题

解决文字和text-decoration：underline下划线重叠问题1.border-bottom2.box-shadow3.background-image4.text-decoration-skip指定覆盖关系5.svg和canvas
复制链接

扫一扫

专栏目录