How to use ::before and ::after in Tailwind?

<span class="before:content-['→'] before:mr-2">
  Arrow before text
</span>

<span class="after:content-['*'] after:text-red-500">
  Required field
</span>

<div class="before:content-[''] before:block before:h-1 before:bg-blue-500">
  Has blue line above
</div>

<div class="relative">
  <span class="after:content-[''] after:absolute after:inset-x-0
               after:bottom-0 after:h-0.5 after:bg-blue-500">
    Underline effect
  </span>
</div>

<blockquote class="relative pl-4 before:content-['']
                   before:absolute before:left-0 before:top-0
                   before:bottom-0 before:w-1 before:bg-blue-500">
  Quote with left border
</blockquote>

<span class="relative group">
  Hover me
  <span class="invisible group-hover:visible absolute
               before:content-[''] before:absolute
               before:border-4 before:border-transparent
               before:border-b-black">
    Tooltip
  </span>
</span>