Pseudo elementos CSS


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 pseudo-elemento :: first-line

::first-linepseudoelemento é 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>


Pseudoelementos múltiplos

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>


 

Categoria: curso css | Tags: , , , , , , , , , , | Postado por joemaster em 03/jul/2020

<< Anterior

Próximo >>

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *