::before 和 ::after 里的文字默认不居中，因其默认 display: inline，而 text-align: center 对 inline 元素仅在父块级容器中对可换行文本生效；伪元素无 DOM 节点，需自身设 display: flex 并配 justify-content/align-items，且必须声明 content 及宽高（或 min-值）以避免坍缩。
为什么 ::before 和 ::after 里的文字默认不居中
因为伪元素默认是 display: inline，而 text-align: center 对 inline 元素只在父容器为块级且文本内容本身可换行时才“看起来”居中；一旦伪元素里只有单行文字、又没设置宽高或布局上下文，text-align 就不起作用。更关键的是：伪元素没有实际 DOM 节点，不能直接设 display: flex 并用 justify-content —— 必须靠父元素或伪元素自身触发 BFC/格式化上下文。
用 display: flex 居中伪元素内容（推荐）
给伪元素自身设 display: flex，再配合 align-items 和 justify-content，是最可靠的方式。但注意：必须显式设置 content、width/height（或 min-width/min-height），否则 flex 容器无尺寸，居中无效。
示例：
.box::before {
content: "★";
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 14px;
}- 必须写
content，否则伪元素不渲染 -
width和height不可省略（或用min-替代），否则 flex 容器坍缩为 0 - 若需绝对定位居中，可在父元素设
position: relative，伪元素加position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%)，但这是另一种路径，flex 更简洁
用 display: inline-block 配合 text-align 居中
适用于简单图标或单字符，且父元素已设 text-align: center 的场景。伪元素设为 inline-block 后，它就变成一个“可被父级文本对齐控制的块”，此时 text-align 才真正生效。
立即学习“前端免费学习笔记（深入）”；
示例：
.box {
text-align: center;
}
.box::before {
content: "→";
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px; /* 垂直居中关键 */
font-size: 12px;
}- 父元素必须有
text-align: center -
line-height必须等于height才能垂直居中文字（仅限单行） - 若内容是图片或复杂 HTML（如 SVG），
inline-block+vertical-align: middle更稳妥，但需注意基线对齐问题
容易被忽略的兼容性和细节
IE8 只支持单冒号 :before/:after，现代项目基本不用管；但更常踩的坑是：伪元素默认不继承字体、颜色等，必须显式声明。另外，flex 在伪元素上从 Chrome 26+/Firefox 22+ 开始支持，无兼容风险；但若用 gap 或 place-items 等新属性，就得查 Can I Use。
- 伪元素不会继承
font-family，即使父元素写了，也要在伪元素里重写 -
content: ""渲染为空白，但仍是有效伪元素；content: none则完全不渲染（CSS3 新增，IE 不支持） - 若伪元素内容动态生成（如 attr(data-label)），确保对应 HTML 属性存在，否则显示空或报错
attr() function not supported
