要让::after伪元素居中，需在父元素设text-align:center并使伪元素为display:inline-block；若用flex布局，则父元素设display:flex并配合justify-content和align-items。
要让 ::after 伪元素居中，关键不是直接对伪元素本身设置 text-align: center（它不生效），而是利用其父元素的文本对齐 + 行内级布局特性来实现。最常用且可靠的方式就是结合 display: inline-block 和 text-align: center。
父容器必须设置 text-align: center
伪元素默认是行内级（inline），继承父元素的文本对齐方式。所以居中的前提是：给它的**直接父元素**设置 text-align: center。否则伪元素会按左对齐渲染，哪怕内容再少也偏左。
- 确保父元素是块级容器（如
div、p、header等） - 不要只给伪元素设
text-align—— 伪元素没有子文本流，该属性无效 - 如果父元素有浮动、绝对定位或 flex 布局，
text-align可能被覆盖，需检查计算样式
::after 需设为 display: inline-block
仅靠 text-align: center 对纯文字型 ::after 有效，但若你想居中一个带宽高、背景色或图标的伪元素，就必须让它脱离纯文本流，变成可尺寸化、可居中的“块状行内元素”——即 display: inline-block。
- 加上
content: ""（即使为空也要写） - 设置
display: inline-block后，它就能响应父容器的text-align: center - 可自由设置
width、height、background、border等样式
常见居中组合写法（推荐直接套用）
以下是最简实用模板：
立即学习“前端免费学习笔记（深入）”；
.box {
text-align: center; /* 关键：作用于内部所有 inline / inline-block 子项 */
}
.box::after {
content: "→";
display: inline-block; /* 关键：让伪元素可被 text-align 影响 */
margin: 0 auto; /* 可选：配合 width 使用更稳妥 */
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 14px;
}注意：margin: 0 auto 单独对 inline-block 无效（需配合 width 且父容器为 block 才能触发居中），所以主要依赖 text-align；line-height 和 text-align 是垂直+水平居中文字内容的小技巧。
替代方案：flex 居中（更现代、更可控）
如果父容器允许改布局，用 display: flex 更直观：
- 父元素设
display: flex; justify-content: center; align-items: center; -
::after保持display: block或inline-block均可 - 无需担心
text-align继承问题，逻辑清晰，兼容性也足够（IE11+）
