CSS - Pseudo elementos

Os pseudo-elementos CSS são usados para adicionar efeitos especiais a alguns seletores. Você não precisa usar JavaScript ou qualquer outro script para usar esses efeitos. Uma sintaxe simples de pseudoelemento é a seguinte -

selector:pseudo-element {property: value}

As classes CSS também podem ser usadas com pseudoelementos -

selector.class:pseudo-element {property: value}

Os pseudo-elementos mais comumente usados são os seguintes -

Sr. Não.	Valor e descrição
1	:first-line Use este elemento para adicionar estilos especiais à primeira linha do texto em um seletor.
2	:first-letter Use este elemento para adicionar um estilo especial à primeira letra do texto em um seletor.
3	:before Use este elemento para inserir algum conteúdo antes de um elemento.
4	:after Use este elemento para inserir algum conteúdo após um elemento.

O: pseudo-elemento de primeira linha

O exemplo a seguir demonstra como usar o elemento : first-line para adicionar efeitos especiais à primeira linha de elementos no documento.

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         This line would not have any underline because this belongs to nline class.
      </p>
      
      <p>
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      </p>
   </body>
</html>

Ele produzirá o seguinte link -

O: pseudo-elemento de primeira letra

O exemplo a seguir demonstra como usar o elemento : first-letter para adicionar efeitos especiais à primeira letra dos elementos no documento.

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         First character of this paragraph will be normal and will have font size 10 px;
      </p>
      
      <p>
         The first character of this paragraph will be 5em big as defined in the 
         CSS rule above. Rest of the characters in this paragraph will remain 
         normal. This example shows how to use :first-letter pseduo element 
         to give effect to the first characters  of any HTML element.
      </p>
   </body>
</html>

Ele produzirá o seguinte link preto -

O: antes do pseudo-elemento

O exemplo a seguir demonstra como usar o elemento : before para adicionar algum conteúdo antes de qualquer elemento.

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

Ele produzirá o seguinte link preto -

O: after pseudo-elemento

O exemplo a seguir demonstra como usar o elemento : after para adicionar algum conteúdo após qualquer elemento.

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Ele produzirá o seguinte link preto -