text-decoration红色波浪下划线在g/j/y等字符附近断裂的解决方案咨询

用text-decoration实现波浪下划线时，确实会因为g、j、y这类带下伸的字符出现断裂问题，换用背景渐变模拟波浪线就能解决这个问题，具体实现如下：

• 核心思路：利用background-image配合径向渐变绘制重复的波浪形状，通过background-position控制位置，让波浪线始终在文字下方，不会被下伸字符截断。

.wave-underline {
  text-decoration: none;
  background-image: radial-gradient(circle at 50% 100%, red 2px, transparent 3px);
  background-size: 10px 6px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 2px; /* 调整波浪线与文字的间距 */
}

• 代码说明：
  • radial-gradient绘制单个波浪单元，red是波浪颜色，调整2px和3px可以改变波浪的粗细和间距
  • background-size控制波浪的大小和重复间隔
  • background-position把波浪固定在文字底部
  • padding-bottom用来微调波浪和文字的距离，避免和下伸字符重叠

把这个类名加到需要添加波浪下划线的文字元素上，就能得到连续的红色波浪线，不会在g、j、y这类字符处断裂。

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