伪元素

5.1 主要伪元素

CSS中的伪元素可以让开发者为文档中无法通过常规选择器选中的部分添加样式和内容。它们创建了“虚拟”元素，可以像HTML结构一样进行样式化。这个功能超级强大，用于实现复杂布局和美化网页外观。

什么是伪元素

伪元素是一种添加到选择器上的关键字，可以用来为元素的特定部分设置样式。它们创建了虚拟元素，这些元素是页面视觉效果的一部分，但不会改变原始的HTML结构。伪元素通常被用于样式化首字母、首行文本、添加装饰元素等。

主要的伪元素

最常用的一些伪元素包括：

• ::before: 在选中元素的内容之前添加内容
• ::after: 在选中元素的内容之后添加内容
• ::first-letter: 设置元素首字母样式
• ::first-line: 设置元素首行样式
• ::selection: 设置用户选中文字的样式

如何使用伪元素

CSS中的伪元素用双冒号 (::)来表示，不过有些伪元素为了兼容旧版本浏览器，也可以使用单冒号 (:)。

语法格式：

    
      选择器::伪元素 {
        属性: 值;
        属性: 值;
        属性: 值;
        ...
      }
    
  

5.2 使用伪元素的例子

1. 添加装饰性元素

伪元素经常被用于在一个元素的内容之前或之后添加装饰性内容：

    
      /* 在链接文本之前添加图标 */

      a::before {
        content: "🔗";
        margin-right: 5px;
      }

      /* 在段落后面添加装饰性元素 */

      p::after {
        content: "❦";
        display: block;
        text-align: right;
        color: red;
      }
    
  

在这些例子中，伪元素 ::before 和 ::after 被用于分别在链接文本前添加一个图标，以及在段落后添加一个装饰性元素。

2. 样式化首字母和首行

伪元素可以用来样式化段落的首字母或首行，这在排版设计中非常常见：

    
      /* 设置段落首字母样式 */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* 设置段落首行样式 */

      p::first-line {
        font-weight: bold;
        color: #e74c3c;
      }
    
  

在这些例子中，伪元素 ::first-letter 和 ::first-line 被用于分别为段落的首字母和首行设置样式。

3. 选中文字的样式

伪元素 ::selection 可以用来样式化用户选中的文字：

    
      /* 设置选中文字的样式 */

      ::selection {
        background-color: #3498db;
        color: white;
      }
    
  

在这个例子中，用户选中的文本背景会变成蓝色，文字颜色变为白色。

5.3 伪元素的特点与限制

限制：

• 只能使用一次：伪元素 ::before 和 ::after 在每个元素上只能使用一次
• 必须使用 content 属性：伪元素 ::before 和 ::after 必须使用 content 属性，即使是空的内容
• 浏览器兼容性：现代浏览器支持双冒号语法，但旧版本浏览器仍接受单冒号语法

使用 content 属性的例子

    
      /* 使用空伪元素添加装饰条 */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

在这个例子中，空伪元素 ::before 被用于在 div 的内容前添加一条装饰线条。