How can you create a button hover animation using ::before or ::after?

In this example, the ::before pseudo-element creates a semi-transparent overlay that slides in from the left when the button is hovered, giving a dynamic hover effect without modifying the HTML.

Here, the ::after pseudo-element expands from the center to cover the button background on hover, creating an animated border fill effect entirely with CSS.