37、CSS 伪元素、生成内容与动态 HTML 实践

CSS 伪元素、生成内容与动态 HTML 实践

1. CSS 伪元素与生成内容

1.1 伪元素基础

伪元素允许我们选择文档中不受传统元素边界约束的部分，例如元素的首字母或首行。通过 :before 和 :after 伪元素，我们可以在元素前后插入内容。

• 在 h1 元素后插入冒号

h1:after {
    content: ":";
}

• 在 h1 元素前插入 “Section”

h1:before {
    content: "Section";
}

1.2 自动插入引号

使用 CSS 的自动生成功能，我们可以定义并自动显示引号。首先需要定义引号，然后将其添加到适当的元素中。

• 定义引号

quotes: "“" "”" "‘" "’";

• 应用引号

blockquote:before {
    cont