Um pseudo elemento CSS é usado para estilizar partes especificadas de um elemento.
Por exemplo, ele pode ser usado para:
Estilize a primeira letra ou linha de um elemento
Inserir conteúdo antes ou depois do conteúdo de um elemento
Sintaxe
A sintaxe dos pseudo elementos:
selector::pseudo-element {
property: value;
}
O ::first-line
pseudoelemento é usado para adicionar um estilo especial à primeira linha de um texto.
O exemplo a seguir formata a primeira linha do texto em todos os elementos <p>:
<!DOCTYPE html> <html> <head> <style> p::first-line { color: #ff0000; font-variant: small-caps; } </style> </head> <body> <p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p> </body> </html>
Vários pseudoelementos também podem ser combinados.
No exemplo a seguir, a primeira letra de um parágrafo será vermelha, em um tamanho de fonte xx-grande. O restante da primeira linha será azul e em letras minúsculas. O restante do parágrafo terá o tamanho e a cor padrão da fonte:
<!DOCTYPE html> <html> <head> <style> p::first-letter { color: #ff0000; font-size: xx-large; } p::first-line { color: #0000ff; font-variant: small-caps; } </style> </head> <body> <p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p> </body> </html>
CSS – O pseudo-elemento :: after ou :: before
O ::afterpseudoelemento pode ser usado para inserir algum conteúdo após o conteúdo de um elemento.
O exemplo a seguir insere uma imagem após o conteúdo de cada elemento <h1>:
<!DOCTYPE html> <html> <head> <style> h1::after { content: url(https://www.joemaster.com.br/tutoriais/wp-content/uploads/2020/06/favicon.jpg); } </style> </head> <body> <h1>This is a heading</h1> <p>The ::after pseudo-element inserts content after the content of an element.</p> <h1>This is a heading</h1> <p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p> </body> </html>
<< Anterior Pseudo-classes CSS
Deixe um comentário