CSS中的p::after和p::before伪元素选择器

在CSS中，我们可以使用伪元素选择器实现在元素的内容前后添加元素的效果。其中，p::before和p::after是最常用的伪元素选择器之一。这两个选择器可以在目标元素的前面和后面添加内容。

p::before 选择器

使用p::before选择器可以在HTML中的

元素前面添加一些内容。要使用p::before选择器，需要设置content属性。例如，下面的CSS样式将在每个段落前添加"前面的内容"：

p::before {
    content: "前面的内容";
}

注释: 此处声明的属性要用::before而非:before

p::after 选择器

使用p::after选择器可以在HTML中的

元素后面添加一些内容。要使用p::after选择器，同样也需要设置content属性。例如，下面的CSS样式将在每个段落后添加"后面的内容"：

p::after {
    content: "后面的内容";
}

组合使用

p::before和p::after选择器可以组合使用，针对不同的元素添加前后不同的内容。例如，下面的CSS样式将在每个段落前添加"前面的内容"，在每个段落后添加"后面的内容"：

p::before {
    content: "前面的内容";
}
p::after {
    content: "后面的内容";
}

示例

下面是一个示例，演示了如何使用p::before和p::after选择器在每个段落前后添加内容。

p::before {
    content: "前面的内容：";
    font-weight: bold;
}
p::after {
    content: "（后面的内容）";
    color: red;
}

示例效果如下所示：

前面的内容： 这是一个段落。 （后面的内容）

前面的内容： 另外一个段落。 （后面的内容）

以上就是使用p::after和p::before选择器添加内容的基本方法。记得使用合适的CSS样式设计你的网站，以提高用户体验。