伪元素不显示的首要原因是未设置content属性，此时浏览器根本不会渲染；必须显式声明如content: ""、"★"、attr(data-label)或url(./icon.svg)，且父元素需设position: relative才能精确定位。
伪元素不写 content 就等于没写；不是“看不见”，是根本不会渲染。
为什么 ::before / ::after 什么都没显示？
最常见原因就是漏了 content。哪怕只是画个圆点、加个三角，也必须显式声明 content: ""。浏览器不会默认补空值。
-
div::before { background: red; width: 10px; height: 10px; }—— 完全空白，因为没content -
div::before { content: ""; background: red; width: 10px; height: 10px; }—— 正常显示红点 -
content可取值包括：""、"★"、attr(data-label)、url(./icon.svg)，但不能省略
怎么让伪元素精准定位到文字右侧或角标位置？
伪元素默认插在内容流里，想“浮”出来盖住、贴边、居中，得靠定位组合。
- 父元素必须设
position: relative（或absolute/fixed），否则position: absolute的伪元素会相对于 body 偏移 - 伪元素自身设
position: absolute+top/right等偏移值 - 要盖住内容？加
z-index；要水平垂直居中？用transform: translate(-50%, -50%)比margin更稳 -
vertical-align对absolute伪元素无效，别试
用 border 或 background 画图形时容易踩哪些坑？
伪元素常被用来画三角、圆点、小图标，但不同方式行为差异大，稍不注意就失真。
- 用
border画三角：必须先清空宽高（width: 0; height: 0;），再靠不同方向的border-color控制朝向，例如border-top: 6px solid #007acc; border-left: 6px solid transparent;画右下箭头 - 用
background+border-radius画圆点：得设display: inline-block或block，否则宽高不生效 - 用
url()插 SVG：路径错或资源加载失败，伪元素区域就是空白，且无 fallback；建议优先用内联 base64 或 Unicode -
color只对文本型content生效（字符串、Unicode、attr()），对url()图片完全无效
哪些 HTML 元素不能用 ::before / ::after？
不是所有标签都支持——关键看它有没有“内部内容流”。自闭合标签基本不行。
- 支持的：
<div>、<code><p></p>、<span></span>（需设display: inline-block或以上）、<h1></h1>～<h6></h6> - 不支持：
<img>、<input>、<br>、<hr>—— 它们没有可插入的“前后位置” - 个别浏览器允许对
<img>用伪元素，但行为不一致，属非标准用法，别依赖
真正麻烦的不是语法，而是忘记伪元素不参与 DOM、不可交互、不继承盒模型属性这些隐性约束。一旦想让它响应点击或读取 offsetWidth，就得换真实元素。
