纸上得来终觉浅,绝知此事要躬行
之前看了张鑫旭大神的一篇文章,今天做项目终于用到了,决定记录一下,防止忘记,原文链接如下:
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>