如何用 CSS 替换文本？

替换文本主要是在服务器端解决的。但是在某些情况下，我们无法控制服务器，或者我们在限制下工作，使用 CSS 替换文本可能是一种选择。
方法 1：使用具有绝对定位的伪元素和可见性修饰符
首先，我们包装文本并为其分配一个类。这种方法只需要很少的标记。

Old Text

需要先隐藏文本“旧文本”，新文本必须准确定位在旧文本所在的位置。为此，我们首先使用 CSS 将文本的可见性更改为隐藏。

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

然后我们在完全相同的位置添加一个新文本，使用伪元素和相应的显式定位。

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

注意after是这里使用的伪元素。我们再次使用可见性修饰符来显示新文本。 content属性包含新文本。
例子：

  

    

  

    
Old Text

  

输出：

This text replaces the original.

方法 2：使用带有 标签的伪元素和可见性修饰符
在这种方法中，我们需要更多的标记，但我们不再需要为我们的新文本指定任何绝对定位。我们使用 标签包裹文本。

Old Text

在这个方法中，我们使用一个子元素来包裹文本，即文本现在位于

和 标签内。所以我们可以使用display: none CSS 属性来隐藏 元素中的文本。然后我们可以像之前的方法一样简单地替换文本，而无需指定任何定位。

.toBeReplaced span {
    display: none;
}

.toBeReplaced:after {
    content: "This text replaces the original.";
}

例子：

  

    

  

    
Old Text

  

输出：

This text replaces the original.