菜鸟教程
教程 css tutorial

伪元素选择器

伪元素选择器允许你选中元素的某一部分或在元素前后插入虚拟内容，通常以双冒号 :: 表示，用于增强样式控制。

常用伪元素包括：

  1. ::first-line
    选中元素第一行文本，可设置字体、颜色等样式。
css 
   p::first-line { font-weight: bold; }

`

  1. ::first-letter 选中元素首字母，常用于美化段落开头。
css 
   p::first-letter { font-size: 2em; color: red; }
  1. ::before 在元素内容前插入虚拟内容，需搭配 content 属性使用。
css 
   h1::before { content: "🔥 "; }
  1. ::after 在元素内容后插入虚拟内容，也需使用 content。
css 
   h1::after { content: " ✨"; }

  1. 语法注意事项

    • 推荐使用双冒号（::）表示伪元素，兼容旧浏览器时也可使用单冒号（如 :before）。
    • 伪元素不能作用于某些不可嵌套的元素（如 input）。

伪元素广泛用于界面装饰、标记内容和排版美化，是CSS视觉表现的重要补充手段。

相关内容