持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

最近遇到一个需求，需要实现文字用渐变下划线着重显示。显然使用平常的text-decoration:underline; 设置的下划线是纯黑色，无法实现需求。因此需要使用一些技巧来实现，在此我介绍两种方式来实现，这两种方式都是使用基础的Html和CSS来实现的。

第一种方式：添加伪元素

CSS的伪元素有很多，例如::after、::before、::first-letter等等，在此不作详细介绍和区分。但是需要注意伪元素和伪类的区分，:after是伪类写法，是在CSS2语法，::after则是伪元素写法，是CSS3语法。两者的区别更多的是兼容性上的区别，在这里也不多作阐述，以下都是使用::after来作为举例。

Html部分

<div>测试<span class="test">渐变下划线</span></div>

• 给目标文字加类，方便使用选择器寻找；
• 使用.test设置定位属性为relative，这个步骤是因为实现下划线渐变的主要思路是通过插入一个内容来定位到文字的下部来实现的，因此::after中必然使用到position: absolute;而由此就需要其父元素test补充position: relative;
• 给伪元素添加定位属性并设置位置，left:0;bottom:0;
• 给伪元素添加宽高属性，宽设置为100%，目的是为了使下划线可以包括着重文字全部，高的数值就是下划线的粗细；
• 给伪元素添加background-image，并设置linear-gradient，即是线性渐变；
• linear-gradient是CSS用于创建一个两种或多种颜色进行线性渐变的函数。其基础参数是3个，第一个参数是渐变的方向或者角度（可以输入to right、45deg，如果不指定将默认从上到下渐变），第二、第三或者之后的多个参数都是渐变的颜色（颜色输入可以是red、#FF0000、rgba(255,0,0,1)）。

CSS部分

.test {
    position: relative;
}
.test::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, red, yellow);
}

实现效果

第二种方式：添加空标签

这种方式与第一个方式的思路一致，区别在于通过定位标签的是一个空标签。

Html部分

<div>测试
    <span class="test1">渐变下划线<span class="test2"></span></span>
</div>

• 给目标类.test1里面添加一个空标签span类为.test2；
• 设置.test1定位属性为relative，.test2定位属性为absolute；
• 设置定位位置、宽高以及背景渐变，此步骤与第一种方式内容一致。

CSS部分

.test1 {
    position: relative;
}
.test2{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #FF0000,orange,yellow,rgba(0,255,0,1),blue,indigo,violet);
}

实现效果

总结

实现该需求的主要思路就是用一个设置了宽高渐变的空标签或者空元素，再通过定位显示在其父元素之内来实现。这个思路可以轻松实现包括删除线、标点等类似需求。