Comment utiliser les pseudo-éléments autour d'un texte - font-icon avec ::before et ::after

 

Un pseudo-élément vous permet de placer un élément avant ou après un élément.
On va utiliser ici des exemples sur des menus avec ::before et ::after.


La syntaxe est simple. On commence par positionner l'élément et on lui assigne ensuite la propriété content.

ul li::before {
content: "#";
}

ul li::after {
content: "!";
}

 

Exemple de menu avec font-icon et :before

Afin que vos icones s'affichent correctement, placez ce code sur votre site web, entre les balises <head> et </head> :
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Allez ensuite dans la galerie Font Awaysome pour trouver l'icone qui vous intéresse (ceux en surbrillance sont gratuits).
Cliquez sur celui de votre choix et récupérer le code en haut de page (f101 par exemple).

Exemple :

  • Accueil
  • Produits
  • Contact


Code HTML

<ul>

<li class="test1>Accueil</li>

<li class="test1">Produits</li>

<li class="test1">Contact</li>

</ul>


Code CSS

li.test1:before {
content:"\f101";
font-family:'fontawesome';
color:#000;
padding-right: 5px
}

Exemple de menu avec font-icon et :after

  • Accueil
  • Produits
  • Contact


Code HTML

<ul>

<li class="test2>Accueil</li>

<li class="test2">Produits</li>

<li class="test2">Contact</li>

</ul>


Code CSS

li.test2:after {
content:"\f107";
font-family:'fontawesome';
color:#000;
padding-left: 5px
}