[分享]css中before和after是什么

在CSS中，有两个伪元素before和after，可以用来为HTML元素添加额外的内容。这些伪元素可以在元素的内容前面或后面添加内容，通过设置它们的content属性来实现。 在HTML文档中，我们可...

在CSS中，有两个伪元素before和after，可以用来为HTML元素添加额外的内容。这些伪元素可以在元素的内容前面或后面添加内容，通过设置它们的content属性来实现。
在HTML文档中，我们可以使用如下代码来添加before伪元素：

<p class="example">这是一个段落。</p>
<br>
<style>
.example::before {
    content: "Before";
}
</style> 

上面的代码将在段落内容前面添加一个“Before”文本。我们可以通过类选择器来添加before伪元素。
接下来我们来看after伪元素的例子：

<p class="example">这是一个段落。</p>
<br>
<style>
.example::after {
    content: "After";
}
</style> 

这里的代码将在段落内容后面添加一个“After”文本。与before伪元素一样，我们可以通过类选择器来添加after伪元素。
值得注意的是，伪元素的content属性不接受HTML标记，只能是纯文本。如果你需要在元素前面或后面添加HTML标记，可以使用JavaScript来实现。
除了content属性，before和after伪元素还可以设置其他的CSS属性，例如color、font-size、background-color等等，具体使用方法与普通元素相同。
总之，在CSS中，before和after伪元素是非常有用的功能，能够帮助我们快速地为HTML元素添加额外的内容，从而实现更丰富的页面效果。