CSS3 伪元素选择器详解及示例代码

CSS3 引入了伪元素选择器，它们允许我们通过 CSS 样式来选择和操作文档中的虚拟元素，从而实现更灵活的样式设计。在这篇文章中，我们将详细介绍一些常用的 CSS3 伪元素选择器，并提供相应的示例代码。

在 CSS3 中，伪元素选择器使用双冒号 (:😃 表示，用于区分伪类选择器（单冒号）和伪元素选择器。下面是一些常用的 CSS3 伪元素选择器及其用法：

1. ::before
   选择元素的前面插入内容。可以使用 content 属性来定义要插入的内容。这个伪元素常用于创建元素的装饰效果或添加图标等。

   示例代码：

   .box::before {
        
        
     content: "前面插入的内容";
   }
   ```
   
   

2. ::after
   选择元素的后面插入内容。与 ::before 类似，可以使用 content 属性定义要插入的内容。通常用于在元素后面添加额外的样式或内容。

   示例代码：