This solution is generated by ChatGPT, correctness is not guaranteed. You might also be able to find a solution fromcommunity posts.

AI solution for Interview Question on BFE.dev
39. What are Pseudo Class and Pseudo Element?

Sure! Pseudo classes are keywords added to selectors that specify a special state of the selected element(s), such as :hover, :active, :checked, and :focus. Pseudo element, unlike pseudo class, selects part of an element and style it. Examples of pseudo elements include ::before, ::after, ::first-letter, and ::first-line. With pseudo classes and elements, we can add styles and effects that were not possible with just classes and IDs.