Pseudo-Elements pada Hover, Focus, dan Other States dalam Tailwind CSS (::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>

  <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>

<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
  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>