伪元素::before和::after核心价值在于控制视觉节奏与语义层次，而非添加内容；通过精准定位、content值选择及与line-height/vertical-align配合，可实现悬挂缩进、末行对齐、首尾装饰等专业排版效果。
伪元素 ::before 和 ::after 在排版中不是用来“加内容”的，而是用来“控制视觉节奏”和“建立语义层次”的。它们不改变 DOM，但能精准干预行高、对齐、缩进、引文结构等排版细节，关键在于定位方式、content 值选择和与 line-height/vertical-align 的配合。
用 ::before 实现首行悬挂缩进（hanging indent）
传统 text-indent 仅缩进第一行，但学术引用、参考文献常需“悬挂”——首行左对齐，后续行缩进。CSS 本身不支持悬挂缩进，但可用 ::before 模拟：
-
::before设置content: ""，宽高设为负值（如width: -2em），配合float: left或position: absolute拉出空白区域 - 父容器需设
overflow: hidden防止浮动溢出 - 必须搭配
line-height和font-size精确计算偏移量，否则多行文本错位 - 不适用于弹性布局或
display: inline-block元素，会破坏基线对齐
用 ::after 控制段落末尾对齐与分隔逻辑
排版中常见“末行右对齐 + 分隔符”需求（如诗集、歌词、法律条文），::after 可避免在 HTML 中硬编码分隔符：
-
content: attr(data-separator)动态读取属性值，支持不同段落用不同符号（•、‖、⋯） - 设
display: inline-block+vertical-align: baseline保证符号与末字基线对齐 - 若末字是标点（如句号），
::after会紧贴其后；需用margin-left: 0.2em微调间距 - 当段落被
hyphens: auto断行时，::after仍只出现在视觉末尾，不会随断行重复
用双伪元素实现行首/行尾装饰性字符自动对齐
引文排版常用首尾装饰字符（如《》、“”、» «），但手动加易错且难响应式。双伪元素可解：
-
::before插入左符号，::after插入右符号，均设position: absolute - 父元素需设
position: relative，并用top: 0/bottom: 0+line-height计算垂直偏移 - 符号字体大小建议用
em单位，使其随正文缩放；避免用固定px，否则小屏下溢出 - 若文本含换行，
::before和::after默认只渲染一次——这反而是优势，符合排版规范
伪元素干扰行内盒模型时的典型表现与修复
伪元素默认 display: inline，一旦参与行内流，极易引发意外换行、基线偏移或文字重叠：
- 现象：加了
::before后，相邻文字突然换行，或图标与文字间出现多余空隙 - 根因：伪元素生成的匿名行内盒参与
line-height计算，尤其当content为空字符串时仍占位 - 修复方式：显式设
display: inline-block+vertical-align: middle，或用font-size: 0抑制空格占位 - 注意：
content: ""和content: " "行为不同——后者插入真实空格，会受white-space影响
真正难的不是写出来，而是判断该不该用：当排版逻辑依赖字符位置（如首字下沉旁的装饰线）、需要绕过 HTML 语义约束（如法律条文编号前缀），或必须保持 DOM 干净时，伪元素才是不可替代的。其他情况，优先用真实元素更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
