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}/, '***');

Answer 2

一个可以随心所欲的解决方案，试着看看它

.replacer {
  display: inline-block;
  position: relative;
  font-family:monospace;
  font-size:18px;
}

.replacer:before {
  content: attr(stars);
  background-color: #fff;
  position: absolute;
  left: 0;
}

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

要增加星际中的星数，只需更改html中的星星属性，同样可以为.replacer::after执行相同的操作，请参阅下面的示例

.replacer {
  display: inline-block;
  position: relative;
  font-family:monospace;
  font-size:18px;
}

.replacer:after {
  content: attr(stars);
  background-color: #fff;
  position: absolute;
  right : 0;
}

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