Geovani Assis

Um Pseudo-Elemento no CSS é usado para as partes específicas de um elemento, partes que não estão diretamente no seu código HTML/PHP.

Por exemplo, pode ser usado para:

• Defina o estilo da primeira letra ou linha de um elemento;
• Insira o conteúdo antes ou depois do conteúdo de um elemento;
• Alterar os marcadores dos itens da lista.

Os Pseudo-Elementos que iremos falar são: first-line (primeira-linha), first-letter (primeiria-letra), before (antes), after (depois), marker (marcador) e selection (seleção).

First – Line

O first-line “geralmente” é utilizado para alterar toda a primeira linha de um texto, podendo ser usado assim:

	p::first-line {
  		color: #ff0000;
  		font-variant: small-caps;
  	}

First – Letter

O first-letter utilizamos para alterar toda a primeira letra de um texto ou titulo , podendo ser usado assim:

	p::first-letter {
  		color: #ff0000;
  		font-size: xx-large;
  	}

Before

O before pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento. O exemplo a seguir insere uma imagem antes do conteúdo de cada elemento <h1>:

	h1::before {
  		content: url(smiley.gif);
  	}

After

O after pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento. O exemplo a seguir insere uma imagem antes do conteúdo de cada elemento <h1>:

	h1::after {
  		content: url(smiley.gif);
  	}

Marker

O marker seleciona os marcadores dos itens da lista. O exemplo a seguir estiliza os marcadores de itens da lista:

	::marker {
  		color: red;
  		font-size: 23px;
  	}

Selection

O selection  corresponde à parte de um elemento que é selecionado por um usuário. O exemplo a seguir torna o texto selecionado vermelho em um fundo amarelo:

	::selection {
  		color: red;
  		background: yellow;
  	}

Bibliografia

w3schools.com. CSS Pseudo-elements. Disponível em: https://www.w3schools.com/css/css_pseudo_elements.asp