button::before内容不显示的根本原因是未设置合法content值或display类型不当；必须显式声明content（如content: ""或attr(data-label)），并设display: inline-block/block才能使宽高、定位生效，且需确保父按钮为可容纳伪元素的容器。
直接用 content 向按钮注入文本内容，**不行**——除非你用的是伪元素（::before 或 ::after），且按钮本身是块级或行内块级容器。原生 <button> 元素的 content 属性本身不生效，它只对伪元素有效。
为什么 button::before 有时“看不见”文本？
常见现象：写了 button::before { content: "提交"; }，但页面没显示。根本原因是：<button> 默认是 display: inline，而 ::before 生成的伪元素默认也是 inline，且不会自动换行、撑开高度、响应 width/height。
- 必须显式设置
display: inline-block或block才能让伪元素有盒模型行为 - 若按钮内容为空（如
<button></button>），伪元素可能被压缩到 0 高度，需加line-height或min-height - 若按钮已有文字内容（如
<button>点击</button>），::before会插在文字前，但可能被默认样式挤出可视区（尤其未设vertical-align）
如何用 attr() 实现按钮文本动态注入？
这是最实用的方案：把文本存在 HTML 属性里，CSS 用 attr() 提取，避免 JS 操作 DOM。
- HTML 写法：
<button data-label="确认删除"></button> - CSS 写法：
button::before { content: attr(data-label); display: inline-block; } - 注意：属性名必须全小写（
data-label可，data-Label不可），且不能含空格或特殊符号 - 若属性值含引号、括号等，浏览器会原样输出；但无法自动转义 HTML 实体（如
多行按钮标签怎么实现？
content 字符串里的 \n 不会被解析为换行——它只是两个字符 \ 和 n。要换行，靠的是布局控制：
立即学习“前端免费学习笔记（深入）”；
- 给伪元素加
white-space: pre-line或pre-wrap，让换行符生效（前提是字符串里真有\n字符） - 更可靠的做法：用空格或
\A（CSS 中的换行符 Unicode 码点）+white-space: pre，例如：content: "确定\A取消"; - 必须配合
display: block或inline-block，否则white-space无效 - 宽度限制（
max-width）和word-break: break-word可辅助折行，但对\A优先级更低
什么时候该放弃 content，改用 JS？
当需要以下任一能力时，content 就不是合适工具：
- 文本需响应用户交互实时更新（比如按钮变“上传中…”再变“完成”）——
content无法绑定事件或监听状态变化 - 要插入 HTML 结构（图标 + 文字组合）、可聚焦元素或 ARIA 属性——伪元素不可访问、不可 focus、不参与语义树
- 需兼容旧版 IE（
attr()在 IE8 支持有限，\A在 IE9+ 才稳定） - 文本来自异步接口（如翻译 API 返回结果）——CSS 无运行时能力
伪元素注入本质是“静态装饰”，不是“动态内容载体”。真正需要交互性或语义性的按钮文本，还是得靠 textContent 或 innerHTML 更新真实节点。
