主题
伪元素选择器
伪元素选择器允许你选中元素的某一部分或在元素前后插入虚拟内容,通常以双冒号 ::
表示,用于增强样式控制。
常用伪元素包括:
::first-line
选中元素第一行文本,可设置字体、颜色等样式。cssp::first-line { font-weight: bold; }
::first-letter 选中元素首字母,常用于美化段落开头。
cssp::first-letter { font-size: 2em; color: red; }
::before 在元素内容前插入虚拟内容,需搭配
content
属性使用。cssh1::before { content: "🔥 "; }
::after 在元素内容后插入虚拟内容,也需使用
content
。cssh1::after { content: " ✨"; }
语法注意事项
- 推荐使用双冒号(
::
)表示伪元素,兼容旧浏览器时也可使用单冒号(如:before
)。 - 伪元素不能作用于某些不可嵌套的元素(如
input
)。
- 推荐使用双冒号(
伪元素广泛用于界面装饰、标记内容和排版美化,是CSS视觉表现的重要补充手段。