用::before在元素前加内容需设content属性（必填），值为字符串、attr()、url()或none；默认inline，需block/inline-block才支持宽高；父元素塌陷、定位失效、overflow隐藏、优先级覆盖等均导致不显示。
怎么用 ::before 在元素前面加文字或图标
直接写 ::before 伪元素 + content 属性就能插入内容，但必须注意：content 是唯一必需属性，缺了它啥都不会显示。
-
::before默认是display: inline，不能设宽高、内外边距也不总生效，想当块级用得加display: block或inline-block -
content值必须是字符串（带引号）、attr()、url()或none；写成content: Hello;（不加引号）会解析失败，浏览器直接忽略整条规则 - 如果目标元素本身没内容（比如空
<div></div>），且没设宽高或min-height，::before可能“看不见”——因为父容器塌陷了
content 里放图标时该用 url() 还是 Unicode
两种都行，但行为不同：用 url() 加载的是图片，用 Unicode（如 \2714）走的是字体渲染路径。
- 用
url("check.png")要确保路径正确，相对路径以 CSS 文件位置为基准，不是 HTML 页面 - 用 Unicode 更轻量，但依赖当前字体是否支持该字符；比如
content: "\2714";显示对勾，但如果字体没这个 glyph，可能出方框或空白 - 想用图标字体（如 Font Awesome），得先确保
@font-face已加载，并在::before里设font-family，否则 Unicode 不会按图标字体渲染
为什么 ::before 内容不显示？常见排查点
不是代码写错，而是几个隐性条件没满足。
- 父元素没有
position: relative（或其他非static值），但你想用top/left精确控制位置——此时定位无效，内容仍按文档流渲染，可能被挤出视口 - 父元素设置了
overflow: hidden，而::before用了负margin或transform移出边界，结果被裁掉 - CSS 优先级被覆盖：比如某个全局样式写了
*::before { content: none !important; }，你的规则就失效了 - 在 Firefox 中，
content值为""（空字符串）时，::before仍会生成一个空的匿名盒子，可能影响布局；Chrome 则更“安静”些
用 attr() 动态取 data 属性值要注意什么
content: attr(data-label); 看起来方便，但有硬限制。
-
attr()只能读取 HTML 属性（attribute），不能读dataset的 JS 设置值，也不能读 CSS 自定义属性（--my-var） - 属性名区分大小写：
data-label和data-Label是两个东西，HTML 解析后全小写，JS 设置el.dataset.label = "x"才对应data-label - 读不到值时，
attr()返回空字符串，不会报错，也看不出哪里断了——建议先用 DevTools 检查元素上真实存在的属性名和值 - 别指望它做计算或拼接，
content: "ID: " attr(data-id) " - " attr(data-status);这种写法合法，但每个attr()都是独立求值，没法加条件或默认值
实际项目里最容易被卡住的，是以为 ::before 是个“万能贴纸”，忘了它本质是依附于父元素盒模型的生成内容——父盒不存在、不可见、或被裁剪，它就跟着消失。调试时先盯紧父元素的状态，比反复改伪元素本身更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
