Tailwind中before/after伪元素必须显式声明content，如before:content-[""]，否则无效；所有样式需加before:/after:前缀；content值需在配置中扩展；定位需宿主relative+伪元素absolute及z-index控制。
tailwind中before/after伪元素必须配合content使用
不加content，before和after类完全无效——这是最常被忽略的前提。Tailwind不会自动为你注入空字符串，你得显式声明：before:content-[""]或after:content-[""]。双引号里的内容会被CSS转义为字符串值，空格、换行、特殊符号都得用转义，比如before:content-["B"]插入零宽空格。
伪元素样式必须用before:或after:前缀逐层叠加
所有作用于伪元素的工具类，都得带上before:或after:前缀，否则它修饰的是宿主元素本身。比如想让::before变成红色圆点，得写before:w-2 before:h-2 before:bg-red-500 before:rounded-full，而不是w-2 h-2 bg-red-500 rounded-full。常见错误是漏掉前缀，结果样式跑到了父容器上。
这些前缀支持嵌套组合，但注意顺序：前缀必须紧贴工具类名，不能中间断开。以下写法合法：before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-gray-300；以下写法无效：before: absolute inset-y-0（空格破坏了前缀绑定）。
content值受限于Tailwind的默认配置
Tailwind默认只生成content-none和content-[""]两个content类。如果要插入文字、图标或Unicode符号，必须手动扩展theme.extend.content。例如在tailwind.config.js里加：
module.exports = {
theme: {
extend: {
content: {
'check': '["✓"]',
'arrow-right': '["→"]',
'quote-open': '["\201C"]'
}
}
}
}
之后就能用before:content-check或after:content-quote-open。不扩展的话，硬写before:content-["✓"]会因JIT引擎未预编译而失效。
伪元素定位依赖absolute/fixed且需z-index控制层级
before和after默认是position: absolute，但Tailwind不自动设position——你得自己加relative到宿主元素，并给伪元素加absolute（或fixed）。否则偏移类如top-2、right-0不起作用。
层级容易出问题：伪元素默认渲染在宿主内容下方。若想盖住文字或边框，必须显式加z-10这类z-index类。常见陷阱是只设了absolute却忘了z-index，导致图标被文本遮挡。
另外，inset-类（如inset-x-0）对伪元素很实用，但仅在absolute或fixed下生效；用static或relative时它们会被忽略。
复杂点在于：伪元素无法响应宿主的transform或filter，除非宿主设了will-change: transform或用isolation: isolate——这种边界情况极少文档提及，但真遇到透明度错乱或缩放失准时，就得想到它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
