O melhor tutorial CSS pseudo-elementos em 2024. Neste tutorial você pode aprender gramática,: Primeira linha pseudo-elemento,Exemplos,: Primeiro letras pseudo-elemento,Exemplos,Pseudo-elementos e classes CSS,Vários pseudo-elementos,Exemplos,CSS -: antes de pseudo-elemento,Exemplos,CSS -: após pseudo-elemento,Exemplos,Todos CSS pseudo-classes / elementos,
CSS pseudo-elemento é usado para adicionar alguns seletores de efeitos especiais.
Pseudo-elemento de sintaxe:
classes CSS também pode usar pseudo-elementos:
"Primeira linha de" pseudo-elemento é usado para estabelecer um estilo especial para a primeira linha de texto.
No exemplo a seguir, o navegador irá basear-se em "primeira linha" pseudo-elemento no estilo da primeira linha do texto formato de elementos p:
Nota: "first-line" pseudo-elemento só pode ser usado para elementos nível de bloco.
NOTA: As seguintes propriedades podem ser aplicados ao "primeira linha" pseudo-elemento:
"First-letra" pseudo-elemento é usado para configurar um estilo especial à primeira letra do texto:
Nota: "first-letter" pseudo-elemento só pode ser usado para elementos nível de bloco.
NOTA: As seguintes propriedades podem ser aplicadas para o "primeiro-letra" pseudo-elemento:
Pseudo-elementos podem ser combinados com classes CSS:
O exemplo acima fará com que toda a classe como a primeira letra do artigo n.º fica vermelho.
Uma pluralidade de pseudo-elementos podem ser combinados para uso.
No exemplo a seguir, o primeiro parágrafo da carta será exibido em vermelho, o tamanho da fonte é xx-large. A primeira linha do resto do texto será azul, e pequenas letras maiúsculas.
Os demais parágrafos do texto no tamanho padrão de fonte e cor para exibição:
"Antes" pseudo-elemento podem inserir um novo conteúdo em frente do conteúdo do elemento.
O exemplo a seguir para inserir uma imagem na frente de cada <h1> elemento:
": Depois de" pseudo-elemento pode inserir o novo conteúdo após o conteúdo do elemento.
Os exemplos a seguir inserir uma imagem após cada <h1> elemento:
seletor | exemplo | shows de exemplo |
---|---|---|
: Link | a:link | Selecione todos os links não visitados |
: visited | a:visited | Selecione todos os links visitados |
: ativa | a:active | Select é um link ativo |
: hover | a:hover | Coloque o mouse sobre o status do link |
: foco | input:focus | Depois de selecionar o elemento de entrada tem o foco |
: First-letter | p:first-letter | Selecione a primeira letra de cada elemento <p> |
: Primeira linha | p:first-line | Selecione a primeira linha de cada elemento <p> |
: Primeiro-criança | p:first-child | <] P> selector elemento corresponde a qualquer elemento pertencente ao primeiro elemento filho |
: antes | p:before | Inserir conteúdo antes de cada elemento <p> |
: depois | p:after | Inserir conteúdo depois de cada elemento <p> |
: Lang (idioma) | p:lang(it) | seleção de atributos lang <p> elemento para um valor inicial |