tailwind 中伪元素需手动启用 before/after 变体，配合 content、定位、尺寸等工具类使用，且 content 值受字符限制，动态内容和交互场景应改用真实 dom 元素。
伪元素在 Tailwind 中不能直接用 before 或 after 类
Tailwind 默认不提供 before、after 这类类名——它压根没内置伪元素的样式支持。你写 before:content-["x"] 会失效，因为 before: 不是合法的变体前缀。
真正起作用的是 before: 和 after: 这两个「变体」（variant），但它们只在你显式启用后才可用，且必须配合内容、尺寸、定位等基础工具类一起用。
- 必须在
tailwind.config.js的variants（v2）或plugins（v3+）中启用before/after支持 - v3.0+ 推荐用
@tailwindcss/forms或自定义插件方式，而不是老版variants - 即使启用了，
before:content-[""]也只生成::before { content: "" }，不自动加display: block或position: absolute—— 这些得你自己补
怎么让 before / after 真正显示出来
光有 content 不够。浏览器默认把 ::before 渲染成 inline 元素，没宽高、不占布局、看不见。
常见做法是组合使用定位和尺寸工具类：
-
relative加在宿主元素上（否则absolute会相对于最近定位祖先） -
before:absolute before:top-0 before:left-0控制位置 -
before:w-4 before:h-4给尺寸（不然 content 只是空字符串，不可见） -
before:bg-red-500 before:rounded加背景或圆角辅助验证是否生效
示例：
div.relative.before:absolute.before:top-0.before:left-0.before:w-3.before:h-3.before:bg-blue-500.before:content-[""]
注意：before:content-[""] 中的空字符串必须带引号，否则构建时报错；双引号需转义为 [""]，单引号写法 [''] 在某些配置下也不稳定。
content 值的写法限制和兼容性坑
content 的值不是任意字符串都能直接塞进去的。Tailwind 对其做了字符白名单过滤，比如空格、括号、斜杠都可能触发 JIT 编译失败。
- 纯文字：用
before:content-["Hello"]（支持英文、数字、短横线） - 含空格：必须全包在引号里，如
before:content-["Hello World"]，且引号要保留 - 图标 Unicode：写成
before:content-["\1F60E"]（注意双反斜杠，JS 字符串转义规则） - 不能用变量或动态值：Tailwind 是编译时生成 CSS，
before:content-[${icon}]完全无效 - Safari 15.4 之前对
content: attr(data-x)支持差，Tailwind 不生成这种写法，所以别试图绕过限制去读 data 属性
替代方案：什么时候该放弃伪元素，改用真实 DOM
一旦你需要交互（hover/focus）、动画重绘、或 JS 动态控制显示隐藏，伪元素就变得笨重。
- 伪元素无法绑定事件监听器，
onclick对::after无效 - CSS 动画若依赖伪元素状态变化（如
before:scale-100切换），在 Safari 下偶发不触发重绘 - 可访问性（a11y）上，伪元素内容默认不被屏幕阅读器读取，除非加
aria-hidden="false"并设role="presentation"—— 但这已超出伪元素本意 - 更稳妥的做法：用
<span class="absolute ..."></span>替代，可控性、调试性、扩展性都更好
伪元素适合静态装饰（分隔线、小圆点、箭头角标），不适合承载逻辑或状态。越想让它“聪明”，越容易掉进 CSS 机制的边界里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
