css实现下划线的最佳实践及其他方式
程序员文章站
2022-03-09 09:28:30
...
开发中下划线效果挺常见的，使用频繁，特别用于对一些文章的内容做一些层次区分，重点分明，用户体验也好，谈谈下划线的多种实现，以及最佳实践
1、文字下划线的实现可以使用原生样式：text-decoration:underline
.mark{
font-size: 22px;
text-decoration: underline;
text-decoration-color: red;
}
局限：
没法调整下划线的位置，太贴文字了也不好看
灵活性太差，用法太单一
2、边框法，就是利用元素的下边框实现，还可以通过line-height调节距离
.mark{
border-bottom: solid 1px red;
line-height: 0.9;
}
局限：
缺点也是致命的，由于下划线是整个元素的，一旦文字换行，就凉了
3.通过::after伪元素实现
.mark{
position: relative;
width: 100%;
}
.mark::after{
content: "";
display: block;
width: 100%;
height: 2px;
background: red;
}
局限： 也是那种换行就凉了系列不要求换行的情况下，是可以实现一些交互的hover效果的
4. box-shadow 实现,即使换行也能完美适配，且可调节度高，
.mark{
background-color: transparent;
box-shadow: 0 3px 0 red;
}
换成inset下划线还能和内容重合，酷
.mark{
background-color: transparent;
box-shadow: inset 0 -10px 0 red;
}
局限： 要想实现动画的效果，就捉襟见肘了
5. background-image我觉得最好的实践方案，即灵活又可以实现动画效果
完整代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style type="text/css">
.content {
margin: 0 auto;
width: 50%;
}
mark {
background-color: transparent;
background-image: linear-gradient(#73ffa0, #73ffa0);
background-repeat: no-repeat;
/*下划线的完整度*/
background-size: 0% 38%;
/*控制background-image在下方*/
background-position: 0 100%;
transition: all 2s;
}
mark:hover {
background-size: 100% 38%;
}
</style>
</head>
<body>
<div class="content">
首先，利用::before伪元
<mark>
素就可以
模拟出覆盖需要的色块
</mark> 。所以仅仅需要 一个 dom 元素。 这里伪元素的content元素必须 给，否则不会显示 （有些坑）。 其次，色块大小改 变是通过scaleY来设置的， 原因和第一个动画原因一样。
<mark>
最后，伪元素的色块会覆盖 dom 上的元素。
所以需要给 dom 元素设置z-index，
并且让其生
</mark> 效并大于伪元素的z-index。
</div>
</body>
</html>
总结：
background-image实现下划线，既可以实现内容下方下划线，内容里面下划线，又可以换行，还可以很灵活的控制动画，具备其他方式实现下划线的所有优点，应该是最佳实践了
上一篇： 实例讲解MVC架构的含义及职责划分
下一篇： python单下划线和双下线的区别