8.1 Tipos de pseudo-elementos
Os pseudo-elementos em CSS permitem estilizar partes específicas de elementos, como a primeira letra, a primeira linha ou adicionar conteúdo antes ou depois de um elemento. Eles oferecem opções adicionais de estilização que não exigem mudar a estrutura HTML. Os pseudo-elementos são indicados por dois pontos duplos (::).
Pseudo-elementos principais:
::before::after::first-letter::first-line
8.2 Pseudo-elemento ::before
O pseudo-elemento ::before adiciona conteúdo antes do conteúdo do elemento. É frequentemente usado para adicionar elementos decorativos, ícones ou texto adicional.
Sintaxe:
seletor::before {
content: "" | "texto" | url() | counter | attr();
propriedade: valor;
}
No campo content você especifica o código html do que precisa ser adicionado.
/* Adiciona uma seta antes de cada item de lista */
li::before {
content: "→ ";
color: red;
}
<ul>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
</ul>
8.3 Pseudo-elemento ::after
O pseudo-elemento ::after adiciona conteúdo depois do conteúdo do elemento. É frequentemente usado para adicionar elementos decorativos, ícones ou texto adicional.
Sintaxe:
seletor::after {
content: "" | "texto" | url() | counter | attr();
propriedade: valor;
}
No campo content você especifica o código html do que precisa ser adicionado.
/* Adiciona um ponto depois de cada item de lista */
li::after {
content: " •";
color: blue;
}
<ul>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
</ul>
8.4 Pseudo-elemento ::first-letter
O pseudo-elemento ::first-letter é aplicado à primeira letra de um elemento. É frequentemente usado para criar letras iniciais decorativas em parágrafos.
Sintaxe:
seletor::first-letter {
content: "" | "texto" | url() | counter | attr();
propriedade: valor;
}
Exemplo:
/* Aumenta e muda a cor da primeira letra de cada parágrafo */
p::first-letter {
font-size: 2em;
color: green;
}
<p>Este é um exemplo de texto em um parágrafo.</p>
<p>Outro exemplo de texto em um parágrafo.</p>
8.5 Pseudo-elemento ::first-line
O pseudo-elemento ::first-line é aplicado à primeira linha de um elemento. É frequentemente usado para estilizar a primeira linha de um parágrafo.
Sintaxe:
seletor::first-line {
content: "" | "texto" | url() | counter | attr();
propriedade: valor;
}
Exemplo:
/* Muda a cor e coloca em negrito a primeira linha de cada parágrafo */
p::first-line {
color: navy;
font-weight: bold;
}
<p>
Este é um exemplo de texto em um parágrafo que contém bastante texto para dividir em várias linhas, demonstrando como funciona o pseudo-elemento ::first-line. A primeira linha de cada parágrafo será destacada em negrito e cor navy para chamar a atenção do leitor. Este efeito é alcançado através da regra CSS que definimos acima.
</p>
<p>
Observe que a estilização é aplicada apenas à primeira linha, independentemente do seu comprimento. O restante do texto no parágrafo mantém seu estilo original. Isso pode ser útil para destacar pontos-chave ou criar um ritmo visual no texto.
</p>
GO TO FULL VERSION