::before 里加文字不显示的最常见原因是未设置 content 属性；此外 display 默认为 inline，遇 flex/grid 布局易塌陷或溢出，且需注意字体继承、xss 风险、可访问性及动态内容限制。
为什么 ::before 里加文字后不显示？
最常见原因是没设置 content 属性——伪元素默认为空，不写 content 就算写了 ::before 也完全不可见。另外，display 默认是 inline，如果父元素是 flex 或 grid 且没设对齐方式，文字可能被挤出视口或塌陷。
插入修饰性文字的正确写法
修饰性文字（比如「·」、「→」、「【新品】」）本质是视觉补充，不该影响语义结构，所以用 ::before 合理。关键点：
-
content必须是字符串、属性值或空字符串（content: ""），不能直接写纯文本 - 若需换行或特殊空格，用 Unicode 转义（如
\a换行需配合white-space: pre） - 字体样式要单独设置，伪元素不继承所有父级样式（例如
font-weight常不继承） - 避免用
content: attr(data-label)插入用户可控内容，有 XSS 风险（尤其在 SSR 场景）
button::before {
content: "★ ";
font-family: "Segoe UI", sans-serif;
font-size: 12px;
font-weight: bold;
color: #ff6b35;
margin-right: 4px;
}
和真实文字混排时的对齐问题
伪元素默认基线对齐，但修饰符号（如图标、小标签）常需要垂直居中或顶部对齐。这时候不能只靠 vertical-align，得结合 line-height 和 transform：
- 文字高度不一致时，优先用
transform: translateY(-20%)微调 - 若父容器
line-height固定，伪元素也设相同值，并加vertical-align: middle - 避免用
top/bottom定位，除非已设position: absolute（此时脱离文档流，需手动控制尺寸）
兼容性与可访问性提醒
::before 在 IE8+ 和所有现代浏览器都支持，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器默认忽略
content中的纯字符串（如"→"），不会读出来；若该符号承载语义（如「必填」），应改用真实<span aria-hidden="true"></span>+aria-label - 打印样式表中，
content默认不输出，如需保留，得显式写@media print { ::before { content: "★ "; } } - 不要在
::before里塞长段落或按钮逻辑——它不是 DOM 节点，无法绑定事件、无法聚焦、无法被 JS 查询到textContent
真正麻烦的是动态内容：想让 ::before 显示不同文字，只能靠切换 class 或 JS 改 data- 属性再用 attr()，没法直接操作伪元素内容本身。
