CSS - Pseudo elementi

Gli pseudo-elementi CSS vengono utilizzati per aggiungere effetti speciali ad alcuni selettori. Non è necessario utilizzare JavaScript o qualsiasi altro script per utilizzare questi effetti. Una semplice sintassi di pseudo-elemento è la seguente:

selector:pseudo-element {property: value}

Le classi CSS possono essere utilizzate anche con pseudo-elementi -

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

Gli pseudo-elementi più comunemente usati sono i seguenti:

Sr.No. Valore e descrizione
1

:first-line

Usa questo elemento per aggiungere stili speciali alla prima riga del testo in un selettore.
2

:first-letter

Usa questo elemento per aggiungere uno stile speciale alla prima lettera del testo in un selettore.
3

:before

Usa questo elemento per inserire del contenuto prima di un elemento.
4

:after

Usa questo elemento per inserire del contenuto dopo un elemento.

Lo pseudo-elemento: first-line

L'esempio seguente mostra come utilizzare l' elemento : first-line per aggiungere effetti speciali alla prima riga di elementi nel 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>

Produrrà il seguente collegamento:

Lo pseudo-elemento: first-letter

L'esempio seguente mostra come utilizzare l' elemento : first-letter per aggiungere effetti speciali alla prima lettera degli elementi nel 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>

Produrrà il seguente collegamento nero:

Il: before pseudo-elemento

L'esempio seguente mostra come utilizzare l' elemento : before per aggiungere del contenuto prima di qualsiasi 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>

Produrrà il seguente collegamento nero:

Lo pseudo-elemento: after

L'esempio seguente mostra come utilizzare l' elemento : after per aggiungere del contenuto dopo qualsiasi 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>

Produrrà il seguente collegamento nero: