Conhe�a os pseudo-elementos do CSS

Os pseudo-elementos nos permitem selecionar algumas �reas internas de um elemento HTML e customiz�-las atrav�s de propriedades. Selecionar a �rea que antecede o conte�do de um elemento adicionando a ela texto ou imagens, ou estilizar apenas a primeira linha de um elemento de texto s�o apenas algumas das possibilidades criadas por esse recurso.

Saiba mais: CSS Tutorial

Neste documento falaremos sobre todos os pseudo-elementos do CSS: ::first-line, ::first-letter, ::before, ::after e ::selection.

T�picos

Sintaxe

Para utilizar um pseudo-elemento basta declarar o seletor seguido pelo pseudo-elemento desejado. Logo ap�s, da mesma forma que � feito com qualquer regra CSS, podemos definir as propriedades a ele relacionadas.

Sintaxe de declaraç�o de um pseudo-elemento:


 [seletor]::pseudo-elemento { propriedade : valor; }

::first-line

O pseudo-elemento ::first-line � utilizado quando desejamos customizar o conte�do apresentado na primeira linha de um elemento. Assim, podemos estilizar esse fragmento de texto de forma independente, aplicando, por exemplo, um tamanho de fonte diferente.

Exemplo de uso:


p::first-line {
   font-size: 16px;
}

Run

Nota: � importante ressaltar que n�o h� uma maneira trivial de definir at� onde o texto ser� estilizado, principalmente quando lidamos com p�ginas responsivas. Ao redimensionar uma p�gina, a primeira linha pode se tornar maior ou menor, e isso tamb�m depende de outros fatores, como o tamanho da fonte, espaçamento entre palavras, entre outros.

::first-letter

O pseudo-elemento ::first-letter nos permite selecionar a primeira letra do conte�do de um elemento. Usamos esse recurso quando desejamos destacar essa letra alterando seu tamanho e sua cor, por exemplo.

Exemplo de uso:


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>


p::first-letter {
    color: red;
    font-size: 32px;
}

Run

Em alguns casos esse recurso pode identificar que algum caractere deve ser selecionado junto com a primeira letra, como quando temos aspas no in�cio do texto.

Quando isso acontece, tanto as aspas duplas quanto a primeira letra ser�o selecionadas e estilizadas. Essa caracter�stica se deve ao fato de ::first-letter tentar se adequar �s particularidades da escrita de cada idioma.

::before

A declaraç�o do pseudo-elemento ::before em um seletor cria um falso elemento que nos permite adicionar conte�do antes do conte�do do elemento selecionado.

Exemplo de uso:


  <div>
   Texto dentro do elemento.
  </div>


div::before {
    content: �pseudo-elemento ::before�;
    color: blue;
}

Run

Nesse exemplo o texto �pseudo-elemento ::before� ser� apresentado antes do conte�do �Texto dentro do elemento� e na cor azul. Para isso declaramos as propriedades content e color como regras do pseudo-elemento.

::after

Assim como ::before, o pseudo-elemento ::after tamb�m cria um falso elemento que nos permite adicionar conte�do ao elemento selecionado, mas desta vez no final dele.

Exemplo de uso:


  <div>
      Texto dentro do elemento.
  </div>


div::after {
    content: "pseudo-elemento ::after";
    color: red;
}
;

Run

Nesse exemplo usamos o ::after para acrescentar uma frase ap�s o conte�do j� presente no elemento <div>.

::selection

O pseudo-elemento ::selection � utilizado para selecionar o conte�do de um elemento e, a partir disso, customizar algumas propriedades dessa �rea, como a cor de fundo e do texto.

Exemplo de uso:


  p::selection {
      color: red;
  }

Nesse caso, todo texto declarado nos elementos <p> de uma p�gina HTML ter� a cor vermelha.

Nota: � importante ressaltar que apenas um pequeno conjunto de propriedades do CSS pode ser utilizado com esse pseudo-elemento. Entre essas propriedades podemos destacar: color, background-color, cursor e text-decoration. Em alguns navegadores ainda podemos utilizar: outline e text-shadow. Quando uma propriedade n�o puder ser renderizada ela ser� ignorada.

Exemplo pr�tico

� comum encontrarmos citaç�es em artigos com o objetivo de enriquecer o texto com informaç�es de outros autores. Nestes casos, para destacar esse conte�do externo normalmente aumentamos o tamanho da fonte utilizada nas aspas duplas que o precedem.

Para obter esse resultado podemos utilizar o pseudo-elemento ::before, como apresentado no c�digo abaixo:


  <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua.
  </blockquote>


  blockquote {
    display: inline;
  }
   
  blockquote::before {
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    vertical-align: -0.35em;
  }

Run

Para aprofundar seus estudos sobre CSS:

Curso de pseudo-classes do CSS.

CSS: Conhe�a os pseudo-elementos

Esta documentação apresenta os pseudo-elementos do CSS, recurso que possibilita a inserção e customização de conteúdo do elemento HTML selecionado.

T�picos

Sintaxe

::first-line

::first-letter

::before

::after

::selection

Exemplo pr�tico

Para aprofundar seus estudos sobre CSS:

Artigos relacionados