如何使用纯CSS替换文本内容的部分字符？

当然可以！纯CSS就能搞定这个需求，不用写一行JavaScript。下面给你两种实用的方案，都能实现把<span class="replacer">ABCDE</span>里的前3个字符替换成***，最终显示为***DE：

方案1：文本缩进+伪元素覆盖 #

这个思路是把原文本的前3个字符移出可视区域，再用伪元素生成***填补到前面的位置，适合等宽字体或者字符宽度差异不大的场景：

.replacer {
  /* 将前3个字符移出可视范围，用ch单位更精准（1ch等于当前字体下数字0的宽度） */
  text-indent: -3ch;
  /* 留出足够空间放置伪元素的*** */
  padding-left: 3ch;
  /* 设为行内块元素，让缩进和内边距生效 */
  display: inline-block;
}

.replacer::before {
  content: '***';
  position: absolute;
  /* 把伪元素定位到左边，刚好对齐文本原本的起始位置 */
  margin-left: -3ch;
}

注意：如果你的字体是可变宽度的，3ch可能需要微调，但大多数场景下这个单位已经足够好用。

方案2：clip-path裁剪+伪元素叠加 #

这个方法更精准，不管字体是否等宽都能完美生效，利用clip-path裁剪掉原文本的前3个字符区域，再用伪元素把***放在裁剪的位置：

.replacer {
  position: relative;
  /* 裁剪规则：inset(上 右 下 左)，这里从左侧裁剪3ch宽度的区域 */
  clip-path: inset(0 0 0 3ch);
}

.replacer::before {
  content: '***';
  position: absolute;
  left: 0;
  /* 确保伪元素在原文本上方显示 */
  z-index: 1;
}

兼容性说明：clip-path在现代浏览器（Chrome、Firefox、Edge等）都有很好的支持，如果需要兼容IE这类老旧浏览器，方案1会更稳妥。

如果你的文本长度不固定（比如有时不足3个字符），还可以结合CSS的:has()选择器或者自定义data-*属性来做适配，但针对你描述的固定替换前3个字符的场景，上面的两种方案完全够用啦！

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