CSS - Pseudo éléments

Les pseudo-éléments CSS sont utilisés pour ajouter des effets spéciaux à certains sélecteurs. Vous n'avez pas besoin d'utiliser JavaScript ou tout autre script pour utiliser ces effets. Une syntaxe simple de pseudo-élément est la suivante -

selector:pseudo-element {property: value}

Les classes CSS peuvent également être utilisées avec des pseudo-éléments -

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

Les pseudo-éléments les plus couramment utilisés sont les suivants -

N ° Sr. Valeur et description
1

:first-line

Utilisez cet élément pour ajouter des styles spéciaux à la première ligne du texte dans un sélecteur.
2

:first-letter

Utilisez cet élément pour ajouter un style spécial à la première lettre du texte dans un sélecteur.
3

:before

Utilisez cet élément pour insérer du contenu avant un élément.
4

:after

Utilisez cet élément pour insérer du contenu après un élément.

Le: pseudo-élément de première ligne

L'exemple suivant montre comment utiliser l' élément : first-line pour ajouter des effets spéciaux à la première ligne d'éléments dans le document.

<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>

Il produira le lien suivant -

Le pseudo-élément: première lettre

L'exemple suivant montre comment utiliser l' élément : first-letter pour ajouter des effets spéciaux à la première lettre des éléments du document.

<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>

Il produira le lien noir suivant -

Le pseudo-élément: avant

L'exemple suivant montre comment utiliser l' élément : before pour ajouter du contenu avant tout élément.

<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>

Il produira le lien noir suivant -

Le pseudo-élément: après

L'exemple suivant montre comment utiliser l' élément : after pour ajouter du contenu après n'importe quel élément.

<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>

Il produira le lien noir suivant -