How do pseudo-classes and pseudo-elements work in Tailwind CSS to enhance UI dynamism?

<!-- Button with hover and focus pseudo-classes -->
<button class="relative px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 transition">
  Hover me
</button>

<!-- Element with animated underline using before pseudo-element -->
<div class="relative inline-block text-indigo-600 cursor-pointer
            before:absolute before:bottom-0 before:left-0 before:h-0.5 before:w-full
            before:bg-indigo-500 before:scale-x-0 before:origin-left
            hover:before:scale-x-100 before:transition-transform before:duration-300">
  Underline on Hover
</div>