Pseudo-Elements pada Hover, Focus, dan Other States dalam Tailwind CSS (::marker)

Hello guys! Tailwind CSS merupakan Framework CSS yang banyak digunakan di Aplikasi Web Modern saat ini. Kali ini kita akan membuat Program Pseudo-Elements pada Hover, Focus, dan Other States dalam Tailwind CSS, khususnya pada ::marker.

Sumber : Tailwindcss.com

Beri gaya pada penghitung atau poin dalam daftar menggunakan varian penanda :

<ul role="list" class="list-disc marker:text-sky-400 ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul>

Contoh :

  <div
    class="mx-auto max-w-sm border-x border-x-gray-200 px-8 py-8 dark:border-x-gray-800 dark:bg-gray-950/10"
  >
    <h2 class="text-base font-semibold text-gray-900 dark:text-gray-200">
      Ingredients
    </h2>
    <ul
      role="list"
      class="mt-3 list-disc space-y-3 pl-5 text-gray-500 marker:text-sky-400 dark:text-gray-400"
    >
      <li>5 cups chopped Porcini mushrooms</li>
      <li>1/2 cup of olive oil</li>
      <li>3lb of celery</li>
    </ul>
  </div>

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)