如何在tailwind css中的伪类处动态传递文本 - after:content-[?] 在.map内的react js中

Question

通过将鼠标悬停在文本 ::after 伪类内容将可见，但仅通过查看或测试，我不会通过这种方法在 tailwind-css 中使用 .map 内的 react-js 在浏览器中打印该文本内容()

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}']  <----- this approach is not working...! Why?
      after:absolute
      after:right-0
      after:text-red-200 `}
    >

      {item}

    </li>
  )
}
</ul>

虽然我也尝试这种方法......

after:content-[${item}]

Answer 1

经过更多的研发，找到了一种将动态数据作为值传递给 tailwind css 中的 (::after) 伪类的方法

<ul className='flex flex-col gap-5 text-[85px]'>
{
  data.map(item =>
    <li
      key={item}
      after-dynamic-value={item}
      className={`cursor-pointer relative
      after:content-[attr(after-dynamic-value)]  <----- this approach is working...
      after:absolute
      after:right-0
      after:text-red-200 `}
    >

      {item}

    </li>
  )
}
</ul>