CSS伪元素选择器::before ::after使用方法_内容与装饰

::before和::after通过content属性在元素前后插入装饰性内容，常用于添加图标、清除浮动、创建气泡箭头等视觉效果，需配合content使用，生成可样式化的行内伪元素，实现结构与表现分离。

CSS伪元素::before和::after允许我们在一个元素的内容前或内容后插入装饰性内容，而无需修改HTML结构。它们常用于添加图标、修饰符号、清除浮动等场景，是实现视觉效果与内容分离的重要工具。

基本语法与使用条件

伪元素::before和::after必须配合content属性使用，否则不会生效。它们生成的是行内元素，可以设置宽高、背景、颜色等样式。

常见写法：

• element::before { content: ""; } —— 在元素内容前插入内容
• element::after { content: ""; } —— 在元素内容后插入内容

注意：单冒号:before是CSS2的写法，双冒号::before是CSS3为区分伪类和伪元素引入的，推荐使用双冒号以增强语义清晰度。

插入文本与特殊字符

通过content属性可以插入纯文本、引号、特殊符号甚至Unicode字符。

示例：

• p::before { content: "提示："; color: red; } —— 每个段落前加“提示：”
• .icon::after { content: "\2713"; } —— 插入对勾符号（✓）
• q::before { content: open-quote; } —— 使用浏览器默认引号样式

使用Unicode时建议转义，避免编码问题，如\00A9表示版权符号©。

创建装饰性图形

结合CSS盒模型和变换，可以用::before和::after绘制简单图形，减少图片依赖。

典型应用：

• 气泡对话框的三角箭头
• 按钮两侧的装饰点或线条
• 悬停时出现的光晕或边框动画

例如，制作一个带小三角的提示框：

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #000;
}

辅助布局与清除浮动

虽然现代布局多用Flexbox或Grid，但::after仍常用于清除浮动容器的高度塌陷问题。

经典clearfix写法：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

将该类应用于浮动子元素的父容器，可确保父元素正确包裹子元素。

基本上就这些。掌握::before和::after的关键是理解它们生成的是可样式化的虚拟节点，适合处理非结构性的视觉内容，不复杂但容易忽略细节。