参考资料

  1. Flex布局在动画制作中的应用？
  2. 边框属性详细说明以及案例
  3. css阴影效果怎么设置
  4. 多重选择器详细说明以及案例
  5. css中div居中
  6. Vanta.js 如何与 CSS 过渡结合？
  7. 层次/关系选择器详细说明以及案例
  8. css3阴影效果

伪元素选择器用于选择元素中的特定部分，而不是元素本身。它们以双冒号 (::) 开头，常用于添加样式到元素的某些部分。

常用伪元素选择器

  1. ::before
    在元素内容之前插入内容。

    p::before {
  content: "前缀: ";
  color: red;
}

    在 <p> 元素内容前添加红色文本“前缀: ”。

  2. ::after
    在元素内容之后插入内容。

    p::after {
  content: " 后缀";
  color: blue;
}

    在 <p> 元素内容后添加蓝色文本“后缀”。

  3. ::first-letter
    选择元素内容的第一个字母。

    p::first-letter {
  font-size: 2em;
  color: green;
}

    将 <p> 元素的第一个字母放大并设置为绿色。

  4. ::first-line
    选择元素内容的第一行。

    p::first-line {
  font-weight: bold;
}

    将 <p> 元素的第一行文本加粗。

  5. ::selection
    选择用户选中的文本部分。

    ::selection {
  background: yellow;
  color: black;
}

    用户选中的文本背景变黄，文字变黑。

案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪元素选择器案例</title>
  <style>
    p::before {
      content: "前置内容: ";
      color: red;
    }

    p::after {
      content: " 后置内容";
      color: blue;
    }

    p::first-letter {
      font-size: 2em;
      color: green;
    }

    p::first-line {
      font-weight: bold;
    }

    ::selection {
      background: yellow;
      color: black;
    }
  </style>
</head>
<body>
  <p>这是一个段落，用于演示伪元素选择器的使用。</p>
</body>
</html>

效果

  1. 在段落前添加红色文本“前置内容: ”。

  2. 在段落后添加蓝色文本“后置内容”。

  3. 段落的第一个字母放大并变为绿色。

  4. 段落的第一行文本加粗。

  5. 用户选中的文本背景变黄，文字变黑。

伪元素选择器通过这些方式增强了对元素内容的样式控制。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。