迹忆客 专注技术分享

本篇文章将介绍几种更改或替换 CSS 内容的方法。

使用 :after 伪元素和 display 属性替换 CSS 中的文本

我们可以使用 CSS 中的伪元素来更改或替换 HTML 中编写的内容。然后使用 :after 伪元素和 content 属性来实现我们的目标。

使用 :after 选择器在所选内容之后附加一些内容。要添加内容，我们使用 content 属性。

我们可以将所需的内容写为 content 属性的值。要替换或更改内容，我们可以隐藏之前写入的内容并使用 content 属性，使用 :after 选择器选择元素。

此方法将 display 属性设置为 none 以隐藏先前的文本。

例如，创建一个带有 text 类的 div。在 div 内，写一个 span 标签和 the original text 在 span 内。

在 CSS 中，选择 span 并将其 display 属性设置为 none。接下来，使用 :after 选择器选择 text 类。

最后，编写 content 属性并将其值设置为正文中的 the changed text。

运行以下示例中的代码片段时，将显示更改的文本。在这里，文本原始文本从文档中删除，它的行为就像元素不存在一样。

这是因为 content 属性的值将占用它的空间。结果，将显示新内容。

<div class="text">
<span>the original text</span>
</div>

.text span {
 display: none;
}
.text:after {
 content: 'the changed text';
}

使用 :before 伪元素和 visibility 属性替换 CSS 中的文本

我们可以使用 CSS 中的 :before 伪元素来更改用 HTML 编写的内容。 :before 伪元素的工作方式与 :after 伪元素类似，但内容呈现在此处。

使用它将内容写入所选元素之前。此方法与第一种方法一样使用 content 属性。

此外，我们可以使用 visibility 属性隐藏之前的内容并将其设置为 hidden。

当设置为 hidden 时，visibility 属性将使内容不可见，但空白区域将显示在文档中。但是，使用 :before 选择器将用新内容覆盖空间。

例如，在第一种方法中使用的示例中，选择 span 元素并将其 visibility 属性设置为 hidden。

但是，请记住删除以前应用的样式。接下来，使用 :before 选择器选择 text 类并编写新内容，如下例所示。

使用 display:none 隐藏以前的内容。但是，我们不能在使用 :after 选择器时使用 visibility:hidden，因为隐藏元素的空间将被保留。

<div class="text">
<span>before</span>
</div>

.text span {
 visibility:hidden;
}
.text:before {
 content: 'after';
}