css before 和 after 常见用途有哪些_伪元素使用说明

::before 和 ::after 必须设置 content 才生效，否则不可见；适用于添加装饰图标、纯CSS图形、清除浮动及自动引号等场景，且需注意定位上下文与 display 设置。

::before 和 ::after 必须配 content 才生效，否则完全不可见——这是 90% 初学者第一次写不出来的根本原因。

添加装饰性图标或符号

适合在按钮、链接、标题旁加小箭头、星号、外部链接图标等，不污染 HTML 结构。

• content 可用纯文本（"→"）、Unicode（"\00A9" 表示 ©）、或 attr(data-icon) 动态读取属性值
• 伪元素默认是 display: inline，若需宽高/定位，必须显式设为 block 或 inline-block
• 注意：用 Unicode 时推荐转义写法（如 \2714 ✄），避免文件编码不一致导致乱码

.btn::before {
  content: "→";
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

构建纯 CSS 图形（三角、气泡箭头）

利用 border 的三角技巧 + 绝对定位，零图片实现对话框小三角、下拉指示箭头等。

• 核心原理：把一个 width: 0; height: 0 元素的三边设为 transparent，剩下一侧设颜色，就形成三角
• 气泡提示中，通常 ::before 做背景框，::after 做三角，两者都需 position: absolute 并共用 top/left 定位基准
• 三角位置偏移常用 margin-left: -5px（半宽）居中，而非靠 transform，更稳定

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

清除浮动（.clearfix）

虽然 Flex/Grid 已成主流，但遇到老项目或内联块布局时，仍需靠 ::after 解决父容器高度塌陷问题。

• 关键三要素：content: "" + display: block + clear: both
• 不能用 ::before 替代——它插在内容最前，无法撑开底部；::after 插在最后，才能真正“清”掉浮动流
• 现代写法可省略 display: table 等兼容旧版 hack，仅保留上述三行即可覆盖 IE8+

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

自动添

加引号或修饰文本

语义化处理引用类内容（如

、），避免手动写 " 破坏可维护性。

• 推荐用 open-quote / close-quote 而非硬编码引号，支持多语言引号规则（如中文用「」，英文用 “”）
• 必须给宿主元素加 position: relative，否则 ::before/::after 的绝对定位会相对于视口定位
• 不要用它放有语义的内容（比如关键说明文字）——屏幕阅读器通常忽略伪元素，且无法被复制选中

blockquote {
  position: relative;
  quotes: "“" "”" "‘" "’";
}
blockquote::before { content: open-quote; }
blockquote::after { content: close-quote; }

真正难的不是写出来，而是记住：所有效果都依赖 content 存在；所有定位都依赖宿主元素有 position 上下文；所有图形都靠 border 或 transform 的像素级控制——漏掉任意一环，伪元素就“隐身”了。