如何用CSS实现厚度渐变递减的下划线效果？

因为border-bottom的厚度是均匀的，无法直接实现渐变递减的效果，你可以通过伪元素+线性渐变的方式来实现，以下是具体方案：

方法：伪元素结合线性渐变 #

这种方式可以精准控制下划线的厚度变化方向（左粗右细/右粗左细），代码示例如下：

左粗右细的下划线 #

.gradient-underline {
  position: relative;
  display: inline-block; /* 确保伪元素能正确对齐文本 */
}

.gradient-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* 调整下划线与文本的间距 */
  width: 100%;
  height: 4px; /* 下划线的最大厚度 */
  /* 通过从左下到右上的渐变，实现厚度从左到右递减 */
  background: linear-gradient(to top right, 
    #000 0%, 
    #000 50%, 
    transparent 50%, 
    transparent 100%);
}

右粗左细的下划线 #

如果需要反向的渐变效果，只需要修改渐变方向为to top left：

.gradient-underline-reverse::after {
  background: linear-gradient(to top left, 
    #000 0%, 
    #000 50%, 
    transparent 50%, 
    transparent 100%);
}

效果说明 #

• 伪元素的height属性控制下划线的最大厚度，数值越大，最粗的部分越厚。
• 调整bottom属性可以改变下划线与文本之间的距离。
• 替换#000为你需要的下划线颜色即可。

内容的提问来源于stack exchange，提问作者noor shal