how to pass dynamically text at pseudo class in tailwind css - after:content-[?] in react js inside .map

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}
      after-dynamic-value={item}                <-- for linking...
      className={`cursor-pointer relative
      after:content-[attr(after-dynamic-value)] <-- linking here...
      after:absolute
      after:right-0
      after:text-red-200 `}
    >

      {item}

    </li>
  )
}
</ul>