Descreva pseudo-elementos e discuta para que eles são usados.

Um CSS pseudo-element é uma palavra-chave adicionada a um seletor que permite estilizar uma parte específica do(s) elemento(s) selecionado(s). Eles podem ser usados para decoração (::first-line, ::first-letter) ou adicionando elementos à marcação (combinado com content: ...) sem ter que modificar a marcação (:before, :after).

• ::first-line e ::first-letter podem ser usados para decorar o texto.
• Usado no truque .clearfix conforme mostrado acima, para adicionar um elemento de espaço zero com clear: both.
• As setas triangulares em tooltips utilizam ::before e ::after. Incentiva a separação de responsabilidades porque o triângulo é considerado parte do estilo e não realmente do DOM.

Notas

• Pseudo-elementos são diferentes de pseudo-classes, que são usados para estilizar um elemento baseado em seu state (como :hover, :focus, etc).
• Dois-pontos devem ser usados em vez de dois-pontos para distinguir pseudo-classes de pseudo-elementos. A maioria dos navegadores suporta ambas as sintaxes, pois essa distinção não estava clara nas especificações antigas do W3C.

Referências

• Pseudo-elements - CSS | MDN