React中在.map()内为Tailwind CSS的:after伪类动态传值的问题

问题场景 #

想实现鼠标悬停时显示:after伪类内容，但在React的.map()循环中，尝试用after:content-['${item}']或after:content-[${item}]动态传递文本，浏览器始终无法正常渲染。代码示例如下：

数据定义 #

const data = [
    "Web Design",
    "Development",
    "Illustration",
    "Product Design",
    "Social Media",
];

组件代码 #

<ul className='flex flex-col gap-5 text-[85px]'>
{
  data.map(item =>
    <li
      key={item}
      className={`cursor-pointer relative
      after:content-['${item}']  <----- 此方法无效！
      after:absolute
      after:right-0
      after:text-red-200 `}
    >
      {item}
    </li>
  )
}
</ul>

根本原因 #

Tailwind CSS是静态编译型框架：它会在项目构建阶段扫描所有代码中的类名，提前生成对应的CSS规则。而你用模板字符串动态拼接的after:content-['${item}']，在构建时属于动态内容，Tailwind无法识别这些类名，自然不会生成对应的CSS，浏览器也就无法渲染出伪类内容。

可行解决方案 #

方案1：利用CSS自定义变量（推荐） #

通过CSS变量传递动态内容，让Tailwind识别固定类名，运行时填充动态值：

1. 修改组件代码，将动态内容存入CSS变量：

<ul className='flex flex-col gap-5 text-[85px]'>
{
  data.map(item =>
    <li
      key={item}
      className="cursor-pointer relative after:absolute after:right-0 after:text-red-200"
      style={{ '--after-content': `"${item}"` }}
    >
      {item}
    </li>
  )
}
</ul>

2. 在全局CSS文件（如globals.css）中添加伪类规则：

.relative::after {
  content: var(--after-content);
}

方案2：使用HTML属性配合attr()函数 #

通过自定义HTML属性存储动态内容，再用CSS的attr()函数读取：

<ul className='flex flex-col gap-5 text-[85px]'>
{
  data.map(item =>
    <li
      key={item}
      className="cursor-pointer relative after:absolute after:right-0 after:text-red-200"
      data-after={item}
    >
      {item}
    </li>
  )
}
</ul>

/* 可放在组件内的style标签或全局CSS中 */
<style>
  .relative::after {
    content: attr(data-after);
  }
</style>

方案3：预生成固定类名（适合数据固定的场景） #

如果数据是固定不变的，可以提前定义好所有可能的after:content类，在循环中直接匹配：

// 预定义所有content类
const contentClassMap = {
  "Web Design": "after:content-['Web Design']",
  "Development": "after:content-['Development']",
  "Illustration": "after:content-['Illustration']",
  "Product Design": "after:content-['Product Design']",
  "Social Media": "after:content-['Social Media']"
};

// 组件中使用
<ul className='flex flex-col gap-5 text-[85px]'>
{
  data.map(item =>
    <li
      key={item}
      className={`cursor-pointer relative ${contentClassMap[item]} after:absolute after:right-0 after:text-red-200`}
    >
      {item}
    </li>
  )
}
</ul>

内容的提问来源于stack exchange，提问作者Taiseen