Dans les interfaces utilisateurs, il peut être intéressant d'ajouter des notifications pour informer l'utilisateur de nouveautés (messages, demande d'amis, rappels, etc...). Il est possible d'afficher ces notifications en utilisant un sélecteur CSS ":after" et l'attribut HTML5 "data-"

Rentrons dans le vif du sujet. Imaginons que vous disposez d'un menu sous forme de liste, dans ce menu il y a un lien menant vers la boite de réception de l'utilisateur : ses messages.

Voici la structure HTML de votre menu :

<ul>
  <li><a href="#">Compte</a></li>
  <li><a href="#">Message</a></li>
  <li><a href="#">Déconnexion</a></li>
<ul> 

Afin de signaler le nombre de notifications, nous utiliserons un attribut HTML5 qui permet de créer des attributs personnalisables et ne pas utiliser les existants à mauvais escient. Il s'agit de l'attribut "data-", très simple d'utilisation, il suffit d'ajouter votre attribut personnalisé à votre balise HTML. Dans notre cas, nous utiliserons l'attribut "data-notification" (logique, non ?). On en profite pour ajouter une .class CSS "notifications". Ce qui nous donne le code suivant - en admettant qu'il y a 5 messages non-lus :

<ul>
  <li><a href="#">Compte</a></li>
  <li><a href="#" data-notification="5" class="notifications">Message</a></li>
  <li><a href="#">Déconnexion</a></li>
<ul> 

C'est bien beau d'avoir spécifié le nombre de notifications, mais pour l'instant, elles ne sont pas visibles par l'utilisateur ... réglons le problème à grand coup de CSS. Les sélecteurs ":after" et ":before" permettent, comme leur noms l'indiquent, d'ajouter du contenu après ou avant le contenu d'un élément. Vous l'avez compris, si on veut ajouter le nombre de notification après le contenu on utilisera ":after", si on veut l'afficher avant on utilisera ":before". Le code CSS est le suivant :

.notifications:after { content:attr(data-notification); }

La propriété CSS "content" permet de générer du contenu. En utilisant "attr(data-notification)", on précise qu'on veut ajouter le contenu de l'attribut "data-notification" et avec ":after" on place ce contenu après. Vous me suivez toujours ?
Le résultat obtenu est le suivant :

Message5

En ajoutant des propriétés CSS, vous pouvez styliser et positionner vos notifications. Amusez-vous et créez de belles notifications ! 
Trois exemples de ce que nous pouvons faire via cette méthode : christophe-hermann.fr/labs/notifications/ !

Un petit remerciement à @nighcrawl pour m'avoir fait découvrir l'attribut "data-".