Pseudo-elements

::before and ::after are called pseudo-elements. CSS creates them inside an element, before or after its content, without you writing a tag for them in the HTML. They're used for decoration, like an arrow, a quotation mark or a small icon: anything that adds no meaning to the content.

The first trap is the content property: without it nothing shows up, so you always write it, even as an empty string: content: "". The second trap is that they're inline by default, and an inline element doesn't accept transform, so you write the motion and nothing moves until you make it inline-block.

Then come the states: :hover is for people using a mouse, and :focus-visible is for people navigating with the keyboard. The second one applies when you press Tab but not when you click with the mouse, so you have no excuse for removing the focus outline.