css下划线渐变色

在网页设计中，下划线是一种常用的装饰性线条。除了使用传统的单色下划线，CSS中还可以实现下划线渐变色。下面我们来看看如何实现。

text-decoration: underline;
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background-size: 100% 2px;
background-position: 0 95%;
background-repeat: no-repeat; 

上述代码中，text-decoration: underline;设置文本下划线，background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);设置渐变背景色，其中to right表示颜色渐变方向为从左到右，red, orange, yellow, green, blue, indigo, violet表示从红到紫7种颜色的渐变过程。

background-size: 100% 2px;设置背景大小，100%表示100%宽度，2px表示高度为2像素。

background-position: 0 95%;设置背景位置，0表示左侧对齐，95%表示离下边界距离为5%。

background-repeat: no-repeat;设置背景不平铺。

完整的CSS下划线渐变色代码如下：

underline {
    text-decoration: none;
    position: relative;
}
underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    background-size: 100% 2px;
    background-position: 0 95%;
    background-repeat: no-repeat;
} 

上述代码中，我们使用::after伪类元素实现下划线效果。通过position: absolute;将下划线定位在文字下方，width: 100%;让下划线宽度充满整个宽度，height: 2px;设置下划线高度为2像素，与背景大小一致。

在使用时，只需要在HTML代码中添加<span class="underline">需要下划线的文本</span>，即可实现下划线渐变色效果。