Depuis l'arrivée de la version 5 du langage HTML 5, un nouvel attribut a fait son apparition, il s'agit de l'attribut data-*.
Cet attribut a pour but de stocker, au cœur même de votre page html, des données particulières sans forcément vouloir les afficher. Vous pourrez retrouver sur le site du W3C ou Mozilla l'ensemble de la philosophie de ce nouvel attribut HTML5.
En deux mots, vous pouvez stocker au cœur d'une balise, de la donnée, sans vouloir forcément l'afficher. Prenons un exemple, vous souhaitez faire une liste de véhicules et pour chacun d'entre eux, vous souhaitez stocker la plaque minéralogique, vous pouvez y associer dans une balise data-plaque="3355 TA 54" par exemple.
Attention cependant, ce n'est pas parce que vous stockez une donnée sous cette forme, qu'elle n'est pas privée. En effet, en affichant le code source de votre page, vous retrouverez bien cet attribut et sa donnée dans votre page web.
Toutefois, vous pouvez être amené à vouloir, à un moment donné de l'existence de votre page Web, afficher le contenu de cet attribut. J'ai cherché et j'ai enfin trouvé la solution que je souhaitais partager ici. Pour effectuer cette manipulation, vous avez simplement besoin de retoucher votre code CSS.
Un exemple
Prenons pour exemple la volonté de vouloir afficher après un paragraphe, le contenu de l'attribut badge. Comme tous ces attributs doivent commencer par la chaîne de caractère data-, dans notre cas, notre attribut s'appellera data-badges.
Ainsi, si nous souhaitons afficher cet attribut à la fin du paragraphe, il nous suffit de faire ce code CSS avec la pseudo classe after: dans notre cas, mais cela peut aussi être before, le but étant de spécifier où placer la donnée)
p::after{
content:attr(data-badges);
}