Are there any special rules for pseudo-classes or pseudo-elements?

[DanKaplanSES]

1. If I have a .button block, how do I "modify" it on hover? I feel like there's only one thing you can do: create a new CSS selector for it, e.g., .button:hover or .button__elem--mod:hover.
2. What's the CSS look like when you have a ::before on a block/element? This isn't as straightforward to me. Like the previous point, you could do .button::before or .button__elem--mod::before, but maybe there's an advantage to avoiding pseudo elements and creating a semantic element in the HTML instead? e.g., .button__before or .button__before--mod

Thanks for the help.