如何用CSS实现特定样式的文本下划线？

针对你需要的特殊下划线样式，这里提供几个实用的实现方案，解决之前背景图无法适配任意文本长度的问题：

1. 优化背景图平铺方案 #

如果想用你之前的SVG思路，只需要添加横向重复属性，就能让背景图自动适配文本长度：

.underline--custom {
  background-image: url("你的无缝平铺SVG路径");
  background-position: 0 1.06em; /* 调整下划线与文本的垂直位置 */
  background-size: 28px 9px; /* 控制单个图案的大小 */
  background-repeat: repeat-x; /* 关键：让背景图横向重复 */
  color: #9e4446;
  padding-bottom: 4px; /* 避免下划线被文本截断 */
}

注意：要确保你的SVG是无缝平铺的（左右边缘图案衔接自然），可以用SVG编辑工具调整图案，避免重复时出现断层。

2. CSS渐变实现（无需外部资源） #

如果不想依赖外部图片，可以用CSS渐变拼接出类似的不规则下划线，示例如下：

.underline--gradient {
  background: 
    linear-gradient(15deg, transparent 35%, #9e4446 35%, #9e4446 55%, transparent 55%),
    linear-gradient(-15deg, transparent 35%, #9e4446 35%, #9e4446 55%, transparent 55%);
  background-position: 0 1.1em;
  background-size: 22px 7px; /* 控制渐变单元的大小 */
  background-repeat: repeat-x;
  padding-bottom: 5px;
}

你可以调整渐变角度、颜色占比和尺寸，匹配目标样式的细节。

3. 伪元素方案（更灵活的控制） #

用:after伪元素单独生成下划线，能更灵活控制下划线的层级、位置和大小：

.underline--pseudo {
  position: relative;
  color: #9e4446;
  /* 可选：给文本添加上下内边距，避免下划线与其他元素重叠 */
  padding: 0 0 6px;
}
.underline--pseudo:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background-image: url("你的平铺SVG路径");
  background-size: 28px 7px;
  background-repeat: repeat-x;
}

这个方案的优势是下划线不会影响文本的行高，也能独立设置样式。

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