css 波浪线

/* 使用 CSS 创建波浪线效果 */

.wavy-line {
  position: relative;
  display: inline-block;
  padding-bottom: 2px; /* 调整下划线与文本的距离 */
}

.wavy-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* 波浪线的高度 */
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    #3498db 10px,
    #3498db 20px
  ); /* 设置波浪线的颜色和重复的渐变角度 */
}

解释说明：

• .wavy-line 类用于包裹需要添加波浪线的文本。
• ::after 伪元素用于创建波浪线效果。它通过 repeating-linear-gradient 创建一个重复的线性渐变，形成波浪线的效果。
• transparent 和 #3498db 控制波浪线的颜色和透明部分的宽度，调整这些值可以改变波浪线的样式。

你可以将这个类应用到任何 HTML 元素上，例如：

<span class="wavy-line">这是一个带有波浪线的文本</span>