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

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 ::before, dan ::after.

Sumber : Tailwindcss.com

Berikan gaya pada pseudo-element ::before dan ::after menggunakan varian before dan after :

<label>
  <span class="text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] ...">Email</span>
  <input type="email" name="email" class="..." placeholder="you@example.com" />
</label>

Contoh :

  <div
    class="mx-auto max-w-sm border-x border-x-gray-200 px-6 pt-6 pb-5 dark:border-x-gray-800 dark:bg-gray-950/10"
  >
    <form>
      <label class="block"
        ><span
          class="block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] dark:text-white"
          >Email</span
        ><input
          type="email"
          id="email-3"
          class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm"
          placeholder="you@example.com"
          name="email"
      /></label>
    </form>
  </div>

Saat menggunakan varian ini, Tailwind akan secara otomatis menambahkan konten: '' secara default sehingga Anda tidak perlu menentukannya kecuali Anda menginginkan nilai yang berbeda :

<blockquote class="text-center text-2xl font-semibold text-gray-900 italic dark:text-white">
  When you look
  <span class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500">
    <span class="relative text-white dark:text-gray-950">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

Contoh :

<div
  class="mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 dark:border-x-gray-800 dark:bg-gray-950/10"
>
  <blockquote
    class="text-center text-2xl font-semibold text-gray-900 italic dark:text-white"
  >
    When you look<!-- -->
    <span
      class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500"
      ><span class="relative text-white dark:text-gray-950"
        >annoyed</span
      ></span
    >
    <!-- -->all the time, people think that you're busy.
  </blockquote>
</div>

Perlu dipahami bahwa dalam sebagian besar proyek berbasis Tailwind, penggunaan pseudo-element ::before dan ::after sebenarnya tidak terlalu diperlukan — dalam banyak kasus, pendekatan yang lebih sederhana adalah dengan memanfaatkan elemen HTML secara langsung.

Sebagai ilustrasi, desain yang sama seperti contoh sebelumnya dapat direalisasikan menggunakan elemen <span> sebagai pengganti pseudo-element ::before. Pendekatan ini umumnya lebih mudah dipahami dari sisi struktur markup dan bahkan menghasilkan kode yang lebih ringkas serta lebih terstruktur.

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

Terima Kasih 😀😊😘👌👍 :)