求助：同CSS设置下目录标题重复点背景图显示大小不一致

问题分析 #

你遇到的H3标题点线大小不一致的问题，本质是伪元素背景图的缩放计算异常导致的。当使用background-repeat结合百分比background-size时，伪元素的宽度会随标题文本长度变化，部分场景下背景图的缩放比例会偏离预期，出现点变小的情况。

修复方案：改用Flex布局实现自适应点线 #

用Flex布局重构标题结构，让点线自动填充标题后的剩余空间，同时通过固定比例的背景大小或CSS渐变避免缩放异常。

方案1：基于背景图的实现 #

/* 基础样式：给标题设置相对定位，确保布局稳定 */
h1, h2, h3 {
  position: relative;
  margin: 1rem 0;
}

/* 将锚点标签转为Flex容器，实现文字和点线的布局 */
h1 a, h2 a, h3 a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
}

/* 伪元素作为点线容器，自动填充剩余空间 */
h1 a::after, h2 a::after, h3 a::after {
  content: '';
  flex: 1;
  margin-left: 0.8rem; /* 文字与点线的间距 */
  background-image: url('你的点图地址');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%; /* 确保点的高度与伪元素高度一致，宽度自适应 */
}

/* 按标题层级调整点线大小 */
h1 a::after {
  height: 0.7em; /* H1点线更大 */
}

h2 a::after {
  height: 0.6em; /* H2点线次之 */
}

h3 a::after {
  height: 0.5em; /* H3点线大小统一 */
}

方案2：纯CSS渐变实现（无需背景图） #

如果不想依赖外部图片，可以用CSS线性渐变直接生成点线，更稳定且灵活：

h1, h2, h3 {
  position: relative;
  margin: 1rem 0;
}

h1 a, h2 a, h3 a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
}

h1 a::after, h2 a::after, h3 a::after {
  content: '';
  flex: 1;
  margin-left: 0.8rem;
  background-repeat: repeat-x;
}

/* H1点线 */
h1 a::after {
  height: 0.7em;
  background: linear-gradient(90deg, #333 50%, transparent 50%) 0 0 / 0.8em 100% repeat-x;
}

/* H2点线 */
h2 a::after {
  height: 0.6em;
  background: linear-gradient(90deg, #333 50%, transparent 50%) 0 0 / 0.7em 100% repeat-x;
}

/* H3点线（大小完全统一） */
h3 a::after {
  height: 0.5em;
  background: linear-gradient(90deg, #333 50%, transparent 50%) 0 0 / 0.6em 100% repeat-x;
}

为什么这个方案能解决问题？ #

1. Flex布局让点线伪元素的宽度始终是标题行的剩余空间，不会因文本长度变化导致背景缩放计算异常；
2. background-size: auto 100%（或渐变的background-size）确保点的高度严格匹配伪元素高度，不同标题的点线大小完全由层级对应的height和背景尺寸控制，避免随机缩放；
3. 纯CSS渐变方案彻底消除了图片加载和缩放的潜在问题，兼容性更好。

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