content属性仅接受字符串、attr()、counter()、url()和none五类值；如content: hello;因缺引号失效，而"→"、attr(title)、url(./icon.svg)、counter(section)均合法。
content属性能插什么内容
不是所有值都合法，content 只接受字符串、attr()、counter()、url() 和 none 这五类。写成 "123" 或 attr(data-label) 没问题；但直接写 123（不带引号）、auto、inherit 都会失效，浏览器默默忽略——连报错都不会有。
常见错误现象：明明写了 content: Hello;，页面却啥也不显示。原因就是漏了引号，变成非法值。
-
content: "→";→ 正确，插入箭头符号 -
content: attr(title);→ 正确，读取元素title属性值 -
content: url(./icon.svg);→ 正确，插入内联 SVG（注意路径是相对 CSS 文件位置） -
content: counter(section);→ 正确，需配合counter-increment使用
::before必须配合display: inline才能生效吗
不是。伪元素默认是 display: inline，但你完全可以改成 block、flex 甚至 grid —— 唯一硬性要求是：它必须生成一个盒（box），而 display: none 会彻底抹掉它，display: contents 也会让 content 失效。
使用场景：做装饰性角标、图标前缀、浮动提示条时，经常要设 display: block + position: absolute。
立即学习“前端免费学习笔记（深入）”；
- 想让它撑开父容器高度？加
display: block并设置height或padding - 想让它和文字垂直居中？
display: inline-flex+align-items: center更稳，比纯vertical-align可控 - 避免意外换行：如果父元素是
white-space: nowrap，而::before是display: block，它会强行折行——这时得用display: inline-block
attr()读不到data-*属性的常见原因
不是 HTML 写错了，就是 CSS 选错了目标元素。attr() 只读**当前伪元素挂载的宿主元素**的属性，且只支持字符串值，不解析表达式或 JS 变量。
典型错误现象：HTML 里写了 <div data-tip="删除"></div>，CSS 却对 div::before 写 content: attr(data-tip);，结果为空。
- 检查属性名拼写：HTML 是
data-tip，CSS 就必须写attr(data-tip)，不能写成attr(datatip)或attr("data-tip")（引号在attr()里是非法的） - 确认伪元素绑定在正确元素上：如果
::before实际加在div > span上，那它读的是span的data-tip，不是外层div的 - 空字符串或未定义属性：浏览器返回空字符串，不会 fallback，也不会报错
伪元素插入内容后无法选中/复制/屏幕阅读器识别
这是设计使然，不是 bug。::before 和 ::after 生成的内容属于「CSS 装饰层」，不在 DOM 树中，所以：getComputedStyle(el, '::before').content 能读到值，但 el.innerText 或 el.textContent 完全感知不到；屏幕阅读器默认跳过；用户也无法用鼠标选中它。
使用场景判断很关键：如果是操作提示（如“必填”）、状态标识（如“已发布”）、纯视觉装饰（如分隔线），用伪元素没问题；但如果是核心信息、需要被搜索/复制/无障碍访问的内容，必须写进 HTML。
- SEO 和可访问性敏感内容（如按钮说明、表单校验提示）——别用
content，改用真实文本节点或aria-label - 想让伪元素内容参与打印样式？可以，但需确保
@media print中没把它设为display: none - 调试技巧：Chrome DevTools 的 Elements 面板里，右键伪元素 → “Break on attribute modification” 不起作用，因为它根本不是 DOM 节点
伪元素的 content 是 CSS 层面的“幻影”，看着有，摸不着，也传不出去。拿不准的时候，先问一句：这个内容，用户复制粘贴时该不该带上？
