Pseudo-elementos

Usado para adicionar elementos extras na página

Identificado por ::palavra-chave

Pseudo-elemento - ::first-letter

Seleciona a primeira letra da primeira linha

Propriedades disponíveis:

• color
• background
• margin
• padding
• border
• font
• Propriedades de texto

Pseudo-elemento - ::first-line

Seleciona a primeira linha

Propriedades disponíveis:

• color
• background
• font
• Propriedades de texto

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus ut maxime id nostrum nisi exercitationem quos unde eveniet! Voluptates cum excepturi saepe esse. Possimus, molestias non at repellat nostrum dicta.

Pseudo-elemento - ::marker

Estiliza os topicos ou números do marcador de uma lista.

• color
• content
• white-space
• font
• animation
• transition

Pseudo-elemento - ::placeholder

Coloca uma dica para ajudar no preenchimento de um campo de formulário

• color
• font
• background
• text

Exemplo:

Pseudo-elemento - ::selection

Estiliza o texto selecionado pelo usuário

• color
• background
• text

Exemplo:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus ut maxime id nostrum nisi exercitationem quos unde eveniet! Voluptates cum excepturi saepe esse. Possimus, molestias non at repellat nostrum dicta.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus ut maxime id nostrum nisi exercitationem quos unde eveniet! Voluptates cum excepturi saepe esse. Possimus, molestias non at repellat nostrum dicta.

Pseudo-elemento - ::backdrop

Estiliza o plano de fundo de um elemento em modo fullscreen

Pseudo-elemento - ::file-selector-button

Estiliza o botão de seleção de arquivo

Card image com Pseudo-elemento ::before

Estiliza elementos na div