Quelques petites définitions à connaître

Avant de commencer ce tutoriel, une petite leçon d'anglais pour ceux qui auraient un peu de mal avec toutes ces propriétés CSS en anglais :

• before signifie avant
  
• after signifie après
  
• hover signifie survoler
  
• content signifie contenu

Ce tutoriel traitant de pseudo-éléments, on en profite pour expliquer ce dont il s'agit : Les pseudo-classes et pseudo-éléments se distinguent des sélecteurs CSS classiques par la présence du symbole : qui les précède.
- Un pseudo-élément est en quelque sorte un élément (HTML) que l'on "rajoute" au HTML par le CSS. C'est le cas de :before et :after, mais aussi de :first-letter par exemple. Ce sont tous les effets que l'on pourrait placer directement dans le code HTML mais qu'on gère par le CSS pour diverses raisons (par exemple si on souhaite voir tous les titres précédés d'un •, le faire par CSS sera plus rapide que d'éditer tous les titres qui passent)
- Une pseudo-classe quant à elle s'occupe d'effets qu'on ne pourrait pas gérer par le HTML. Il s'agit des effets de survol d'un élément (:hover), de sélection d'un champ ou lien via l'usage de la touche de tabulation (:focus), de clic sur un lien (:active), de la différentiation entre un lien visité (:visited) et un lien non visité...

Principe

Tout d'abord, quel est le principe de ces deux pseudo-éléments ? Comme expliqué précédemment, ils permettent de rajouter un texte voire une image avant et après un élément HTML (un titre, un paragraphe, ce que vous voulez). Pourquoi l'utiliser ? Si vous en avez assez d'ajouter manuellement dans un titre - qui se répète - les mêmes symboles, alors utilisez cette propriété.

Un pseudo-élément s'utilise de cette façon :

Code:

Selecteur:before {
content: "♥";
}

Avec Selecteur pouvant être une .classe (précédée d'un point), un #identifiant (précédé d'un dièse) ou un marqueur HTML (précédé de rien du tout, comme body, h1, a...). Il y a beaucoup d'autres types de sélecteurs (qui eux même sont des combinaisons de sélecteurs) mais ceux là sont les bases.

Dans cet exemple j'ai mis le pseudo-élément :before, mais cela marche aussi pour le pseudo-élément :after. Ils s'appliquent toujours à un élément (une classe, un identifiant, un marqueur HTML...) et ne peuvent pas être utilisés tout seuls. Par ailleurs, la propriété content n'accepte pas le HTML.

Pour aller plus loin

Bref, jusque-là, rien d'exceptionnel. Mais la partie qui devient intéressante c'est quand nous combinons ça avec la pseudo-classe :hover. En effet, il est possible de combiner les pseudo-éléments avec des pseudo-classes. Pour rappel, la pseudo-classe :hover permet de gérer le comportement d'un élément au survol. On la voit beaucoup utilisée sur les liens, mais elle marche très bien pour n'importe quel autre bloc (sauf pour les vieilles versions de Internet Explorer évidemment). Vous aurez alors deux sélecteurs :

Code:

.MaClasse {
   /* propriétés de base de mon élément */
}

.MaClasse:hover {
   /* propriétés au survol de mon élément */
}

Pour combiner cet effet avec :before et :after, il faut bien faire attention à l'ordre : la pseudo-classe d'abord, et le pseudo-élément ensuite. Pour vous aider à vous en souvenir, n'oubliez pas que le pseudo-élément "rajoute" un truc. Vous le rajoutez donc à la fin.

Tenez, voici un code et son exemple :

Code:

/* un sélecteur "par défaut", ici une classe */
.MaClasse {
   color: #000099;
}

/* On ajoute un symbole devant l'élément doté de cette classe */
.MaClasse:before {
   content: "•";
}

/* effet au survol de l'élément doté de cette classe */
.MaClasse:hover {
   color: #FF0000;
}

/* SUBTILITE : On met un contenu "vide" avant l'élément quand il est survolé, pour qu'il disparaisse au survol */
.MaClasse:hover:before {
   content: "" !important;
}

/* On rajoute un symbole après l'élément doté de cette classe, quand il est survolé */
.MaClasse:hover:after {
   content: "♪";
}

Ici, !important est très important (d’où son nom), le fait de le mettre avant le point virgule (;) marquant la fin d'une déclaration CSS indique qu’il écrasera toutes les autres propriétés de :before pour cet élément. Ce n'est pas forcément utile dans ce cas (ça marche très bien sans) mais au moins vous le saurez.
A savoir : IE ignore complétement cette règle, donc ne soyez pas étonné si vous êtes sur IE de ne pas avoir les mêmes choses que sur Firefox ou Chrome.

On peut ajouter des margin, voire des padding, pour que cela éloigne le symbole du texte. Cela permet d'éviter que tout soit collé. On peut même ajouter des couleurs pour que le symbole ait une couleur différente que celle du texte.

Code:

.MaClasse:before {
   content: "¤";
   margin:0 10px;
   background-color:#C4698F;
}
.MaClasse:hover:before {
   content: "" !important;
   margin: 10px;
}
.MaClasse:hover:after {
   content: "♪";
   margin: 0 10px;
   color: green;
}

En fait, on peut tout faire avec, mettre des soulignements, un fond rien que pour le symbole, un cadre, etc.

CSS2.1 & CSS3

CSS3 propose une nouvelle écriture pour les pseudo-éléments :after & :before. En effet après le nom de la classe vous devez mettre deux " : " au lieu d'un.
Exemple : .MaClasse::before
Mais sachez que tous les navigateurs ne prennent pas en compte ces deux double-points, comme IE ou Opéra version 4.0