为何CSS content属性无法作用于普通元素？视觉替换文本需求遇困

你对CSS content属性的适用范围理解存在误区，这是代码不生效的核心原因：

• CSS的content属性仅在**伪元素（::before/::after）或替换元素（如img、input这类本身内容由外部资源或浏览器渲染的元素）**中生效。普通行内元素（比如你用的<span>）属于非替换元素，直接给这类元素设置content属性，浏览器会完全忽略该声明，自然不会替换原有内容。
• 你提到content: url()替换内容有效，是因为这个语法会把普通元素强制转换成替换元素，此时浏览器才会用指定图片替换元素内容，但文本替换场景下没有这个转换逻辑，所以不生效。

符合需求的正确实现方案 #

要实现「视觉替换文本，但选中复制时保留原始内容」的效果，正确做法是用伪元素覆盖原有文本，同时隐藏原有文本但保留其可复制性：

/* 核心替换样式 */
[data-replace] {
  position: relative;
  background: yellow;
  color: transparent; /* 隐藏原始文本，但不影响复制 */
}

[data-replace]::after {
  content: attr(data-replace);
  position: absolute;
  left: 0;
  top: 0;
  color: #000; /* 替换文本颜色，和正文保持一致即可 */
}

/* 其他示例样式适配 */
.replace {
  position: relative;
  background: orange;
  color: transparent;
}

.replace::after {
  content: "test";
  position: absolute;
  left: 0;
  top: 0;
  color: #000;
}

.replace-with-image {
  content: url("//cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico");
  background: green;
}

对应的HTML保持不变：

<p>
  foo <span data-replace="test">bar</span> baz.<br>
  foo <span class="replace">bar</span> baz.<br>
  foo <span class="replace-with-image">bar</span> baz.<br>
</p>

这个方案的逻辑是：把原始文本设为透明（肉眼不可见，但仍存在于DOM中可被选中复制），再通过绝对定位的::after伪元素显示替换内容，视觉上完全覆盖原始文本区域，既满足视觉替换需求，又保留了原始文本的复制能力。

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