伪元素内容不显示，根本原因是content声明生效但缺少display、position、尺寸、relative定位和配置扩展五要素。tailwind的after:content-类仅设置content值，其余必须手动补全，否则伪元素为空inline节点不可见。
伪元素内容不显示，几乎总是因为 content 没生效——不是写错了，就是没配齐依赖项。Tailwind 的 after:content-[""] 类本身合法，但单独用它，99% 的情况都看不到东西。
为什么 after:content-[""] 单独写没反应
Tailwind 不会自动给伪元素加 display、position 或尺寸。浏览器看到 ::after { content: "" } 后，只生成一个 inline 空节点，没有宽高、不占布局、不可见。
-
after:content-[""]只负责注入 CSS 的content声明，其余全靠你手动补 - 漏掉
after:block或after:inline-block→ 高度/宽度类（如after:h-2）完全无效 - 没给宿主元素加
relative，又用了after:absolute after:top-0→ 伪元素定位失效，可能飞出视口 - 写了
after:content-["✓"]但没在tailwind.config.js里扩展content→ JIT 编译器不认，CSS 规则压根不生成
after:content- 的引号和转义必须严格匹配
CSS 中 content 值必须是字符串字面量，Tailwind 的 JIT 引擎对引号格式极其敏感。
- 合法写法只有两种：
after:content-[""]（双引号包裹空字符串）或after:content-['']（单引号），但后者在部分构建环境不稳定，推荐统一用双引号 -
after:content-["→"]✅ 可用；after:content-[92]❌ 不被识别（JIT 不解析裸 Unicode 转义） - 含空格或特殊符号必须整体包在引号内：
after:content-["New & improved"]，不能拆成after:content-["New"] after:content-["&"] - 动态拼接无效：
after:content-["icon-" + $size]是 JS 表达式，Tailwind 编译时直接忽略
宿主元素没设 relative，after:absolute 就白搭
伪元素用 absolute 定位时，参考系是“最近的已定位祖先”。如果宿主没设 position: relative，它就往上找，常落到 body 或某个意外容器上，导致位置飘移甚至消失。
- 必须显式加
relative到宿主元素，例如：div.relative.after:absolute.after:top-0.after:right-0 - 若宿主已是
flex或grid，absolute仍有效，但需注意：Flex/Grid 容器内的子项默认align-items: stretch，可能干扰伪元素垂直居中 - 伪元素层级默认低于宿主文字内容，要盖住文字就得加
after:z-10，且确保宿主有层叠上下文（relative已满足） - 别信“父元素 overflow-hidden 就能裁图标”——真这么干，
after:absolute after:-left-2这种微调会直接被砍掉
想插文字或图标？先扩 content 配置，否则白写
Tailwind 默认只生成 content-none 和 content-[""] 两个类。你硬写 after:content-["✓"]，JIT 编译器因未预声明而跳过，最终 CSS 文件里根本没这条规则。
- 必须在
tailwind.config.js的theme.extend.content里注册：
module.exports = {
theme: {
extend: {
content: {
'check': '["✓"]',
'arrow': '["→"]',
'quote': '["C"]'
}
}
}
}
after:content-check、after:content-arrow 等类C 要双反斜杠（JS 字符串转义），写成 "C"，不是 "\201C" 也不是 "u201C"
after:content-["?"] 可行，但得保证 CSS 文件编码为 UTF-8 无 BOM，否则某些构建工具会报错真正卡住人的，从来不是 after:content- 怎么写，而是它悄悄依赖着 display、position、relative、z-index 和配置扩展这五样东西——少一个，就静默失败。调试时别猜，打开 DevTools 的 Styles 面板，直接看那个 ::after 节点的 computed content 值是不是你预期的字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
