纯css实现：文字可换行的下划线、波浪线等效果

南极一块修炼千年的大冰块
4,631 阅读6分钟

这是我参与更文挑战的第24天，活动详情查看： 更文挑战

前言

今天领导开会时说努力工作会更快成熟，比如大冰块同学就比起刚进公司时就成熟了不少，我若有所思，上卫生间时照照镜子才发现，哦~原来我现在看上去比他们都老。

哈！以上先讲个段子开心一下，现在又到了夜深人静的时刻，开始我的更文大业~ 今天更点简单但是很有意思的 —— 文字下划线效果。这是一个不经常用，但是业务场景涉及到的话就是不可避免的功能，比如我们现在的某个业务，需要领导审批时做标记，标记的文字要有下划线或者波浪线的效果。

过程

虽然文字下划线有官方的属性 text-decoration，但是我们优秀的设计小姐姐当然不会采用默认的样式，设计小姐姐总有自己的想法，并且构思总是不受技术的约束，设计小姐姐对我说默认的下划线样式太丑，无法修改，她要能粗细长短高低都随她心意变化的，我看了一下：

image.png

嗯~ 是有一点丑，主要是粗细长短高低不能随她心意变化，那就听设计小姐姐的意思重新写一个吧！

作为一名本着能简单就不复杂的前端摸鱼大师，我决定用border边框去实现它，于是我3秒钟敲出了如下代码：

    <style>
        p{
            display: inline-block;
            border-bottom: 2px solid aquamarine;
        }
    </style>

    <p>南极大冰块</p>

运行效果如下：

image.png

添加line-height: 10px;之后效果如下：

image.png

我说，你看这个颜色可以变了，最重要的是粗细、长短、位置的高低，是不是都能随你心意变化了？

设计小姐姐若有所思的样子，说：这个文字换行之后什么效果呢？

换行之后的效果：

image.png

设计小姐姐撅起了嘴，这样子肯定不行嘛！上面文字的下划线怎么没了？

嗐~ 看来不能愉快的摸鱼了，难不成用box-shadow来实现？不过box-shadow实现的效果应该是和border-bottom一样...这样思考起来，只能用 —— background: linear-gradient()渐变背景属性来解决这个问题了。

还记得我之前一篇文章《纯css实现：多行文本框内的斑马条纹效果》吗？多行的文本背景色能实现，那么顺着这个思路说起来，我把文字对应的背景色改为透明的，文字下面的背景色改为1px指定颜色的，岂不是大功告成？

我真是个天才啊~

正当我构思完代码，准备花10秒钟敲出代码的时候，设计小姐姐又发话了：

哎呀，你怎么想这么久，这很难吗？我要是会敲代码，早就搞完啦！这样吧，我不仅要直线的下划线，还要曲线的下划线，并且下划线的样式不能是纯色的......巴拉巴拉......

我面带微笑的看着她，任凭她舌灿莲花滔滔不绝，殊不知我早已想好了另一个对策 —— background背景属性中的 background-image ！

对css渐变背景感兴趣的可以看我之前这篇文章：《如何把css渐变背景玩出花样来》~

当设计小姐姐终于说完了要求，我说小意思，这都能实现，哪怕你要求文本下面是贴画的线条呢，我也能实现，实现的基础很简单，把你要的样式给我 —— 切图~

最终我花费了20秒钟完成了设计小姐姐的要求，代码如下：

    <style>
        .straight-line{
            background-image: url('./straight.png'); /* 直线宽5px的图片 */
            background-position: 0 100%;
            background-repeat: repeat-x;
            background-size: 100% 3px;
            padding-bottom: 2px;
        }
        .wavy-line{
            background-image: url('./wavy.png'); /* 波浪线宽2px的图片 */
            background-size: 9px 4px;
            background-position: 0 100%;
            background-repeat: repeat-x;
            padding-bottom: 3px;
        }
    </style>

    <span class="straight-line">我希望南极大冰块下划线是直线</span>
    <span class="wavy-line">我希望南极大冰块下划线是波浪线</span>

实现效果如下：

image.png

大功告成，继续我的摸鱼大业~

后记

希望大冰块今天分享的内容能对你有所帮助，下划线这个场景的确用到的地方不多，不过前端生涯基本都会有类似的需求，虽然实现起来很简单，但是一时半会可能想不到这个思路，所以有时间的话，也可以自己动手写一遍，避免眼高手低，同时理一下用到的css属性哦~

今天是我坚持日更的第二十四天，今天还是加班的一天，回家之后马上十点，还是坚持想题材更了这篇文章，写的过程还蛮顺利的~

每天输出一点点，进步一点点。有志者，事竟成。大家一起加油呀~

如果本文对你有帮助，别再是悄悄收藏啦！比如点个赞呀，关注大冰块呀，一起和大冰块学习更多好玩的技术博客吧~

d2a3b6f182407290c859b16b1d4715a3.gif

更文挑战的文章目录如下：

avatar
文章
阅读
粉丝
相关推荐
【文字特效】用css3画割裂和抖动的文字效果
638阅读
 · 
4点赞
前端button组件之按钮式进度条
5.9k阅读
 · 
118点赞
CSS实现各种Loading效果附带解析
2.6k阅读
 · 
30点赞
竖直导航栏--css项目
590阅读
 · 
0点赞
一点点js和一点点css实现霓虹字体
2.5k阅读
 · 
47点赞
寥寥数行SVG实现圆环loading或倒计时效果
733阅读
 · 
2点赞
🖌️一起重学CSS3-有趣的边框
1.1k阅读
 · 
0点赞
一个简单的收藏动画
3.8k阅读
 · 
85点赞
🔥🔥 试试这几个让你的项目更加炫酷的动画库
952阅读
 · 
22点赞