伪元素不渲染的首要原因是未设置content属性；必须显式声明content（如""或" "），且需确保字体加载、父元素可见、定位与层叠上下文正确，否则无法进入渲染树。
必须写 content，否则伪元素完全不渲染——这是 90% 的“没效果”问题根源。
为什么写了 ::before 却看不到任何东西
最常见原因是漏了 content 属性。它不是可选的，是强制的。哪怕你只想画个圆点、加个边框、做三角形，也得显式声明 content: ""。
-
content: ""是最安全的写法，生成一个空但可样式化的节点 -
content: none或直接不写content→ 伪元素彻底消失，连盒模型都不占位 - 如果用了
content: attr(data-icon)，但元素没有该属性，结果也是空白（不会报错） - Unicode 字符如
content: "\260E"要确保字体支持，否则可能显示为方块或空白
怎么让 ::before / ::after 真正“浮”在内容上
伪元素默认是 inline 级别，插在文字流里。想让它脱离文档流、盖在文字上方、当遮罩或角标，必须手动干预定位逻辑。
- 父容器必须有
position: relative（或absolute/fixed），否则position: absolute的伪元素会相对于body或最近定位祖先偏移，常导致“飞走” - 伪元素自身要设
position: absolute，再用top/left等精确定位 - 需要盖住内容？加上
z-index；需要居中？配合transform: translate(-50%, -50%)比单纯margin更可靠 - 注意：
vertical-align对absolute伪元素无效，别白试
用 border 或 background 做图形时要注意什么
伪元素常被用来画三角、圆点、小图标，但不同实现方式行为差异大。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
border画三角：必须设width: 0; height: 0，再用不同方向的border-color控制朝向，比如border-top-color: #007acc+border-left: 10px solid transparent组合出右下角三角 - 用
background+border-radius画圆点：记得设display: inline-block或block，否则宽高不生效 - 用
url()插入 SVG：路径错误或资源加载失败时，伪元素区域就是空白，且无法 fallback；建议优先用内联 base64 或 Unicode -
color只对文本型content生效（字符串、Unicode、attr()），对url()图片完全无效
哪些元素不能用 ::before / ::after
不是所有 HTML 元素都支持伪元素。关键看是否能产生“内容流”。
- 支持的：
<div>、<code><p></p>、<span></span>（需设display: inline-block或以上）、<li>、<h1></h1>～<h6></h6> - 不支持的：自闭合标签如
<img>、<input>、<br>、<hr>—— 它们没有“内部内容”，伪元素无处插入 - 例外：某些浏览器允许对
<img>使用，但行为不一致，属非标准用法，不要依赖 - JS 无法获取或操作伪元素，它们不在 DOM 树中，只存在于渲染层
真正难的不是画出来，而是控制它不随内容重排乱跑、不遮挡可点击区域、在缩放或换字体时仍对齐——这些细节往往要靠 transform、em 单位和父容器的 position 配合才能稳住。
