Ligne de conduite en CSS

Notez que cet article a été écrit pour la première fois il y a plus de 4 ans, mais n'est pas nécessairement obsolète.

  • Visites3 504
  • Aujourd’hui67
  • En ligne9

Pour obtenir cet effet typographique appelé ligne de conduite, on écrit les données dans une simple liste en séparant le côté gauche du côté droit par des balises <span>.

Dans la partie CSS, on déclare la liste en enlevant les pastilles et en cachant le dépassement afin de pouvoir insérer une série de point.

On utilise la pseudo-classe :before pour insérer la série de points. Cette div est placée en élément flottant à gauche. On empêche le retour à la ligne avec wite-space: nowrap.

width: 0 permet à la série de point de s’insérer sur la même ligne que les items.

content est une série de points suffisamment longue pour compléter la ligne.

Le premier élément de la liste va se placer au début de la ligne avec un fond blanc pour cacher la série de points qu’il superpose. Le 2ème élément est placé en élement flottant droit avec un fond blanc. Le padding permet de laisser un espace entre les items et la ligne de conduite

Si l’on veut que cette ligne n’occupe pas tout l’espace de la div, on peut limiter la largeur en fixant une largeur maximum: max-width.

Il faut bien-sûr ajouter la classe maxWidth à la liste:

  • Visites3 504
  • Aujourd’hui67
  • En ligne9

Voilà un joli effet obtenu avec seulement quelques lignes de CSS.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.