CSS - 替换部分内容文本

Question

有没有办法使用纯 CSS 来替换部分内容文本，例如，如果文本是 ABCDE -

<span class="replacer">ABCDE</span>

但是 ABCDE 的前 3 个字符将是 *，因此它将显示为 ***DE。

Answer 1

不，在纯 CSS 中不可能更改内容，但您可以通过重叠某些内容来作弊，例如

.replacer { 
  font-family: monospace; 
  position: relative; }

.replacer::before {
   background: #fff;
   position: absolute;
   content: "***";
}

Codepen demo

或者，另一种棘手的方法可能是创建并加载一种特殊字体，将符号 A、B 和 C 映射到星号中(通过 unicode-range 属性，https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range)

---

在 javascript 中你只需要替换元素的 textContent 属性

var el = document.getElementsByClassName('replacer')[0]
el.textContent = el.textContent.replace(/^.{3}/, '***');