更改 CSS 中的内容

Subodh Poudel 2023年2月20日 2022年4月20日
  1. 使用 :after 伪元素和 display 属性替换 CSS 中的文本
  2. 使用 :before 伪元素和 visibility 属性替换 CSS 中的文本
更改 CSS 中的内容

本教程将介绍几种更改或替换 CSS 内容的方法。

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

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

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

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

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

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

在 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';
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn