Comment créer une ligne verticale en HTML et CSS

Une simple séparation verticale peut structurer une interface, distinguer deux colonnes ou guider l’œil dans une frise chronologique. En HTML, il n’existe pas de balise dédiée à cet usage : la solution fiable consiste à associer une structure sémantique à du CSS, généralement avec border-left, border-inline-start ou un pseudo-élément. Je présente ici les méthodes les plus propres, leurs limites et les réglages utiles pour obtenir un résultat responsive et accessible.

Ce que représente réellement une ligne verticale en HTML

Le HTML décrit le contenu et sa structure, tandis que le CSS s’occupe de l’apparence. Pour cette raison, je déconseille de chercher une balise magique dédiée au trait vertical : la ligne est généralement une bordure ou un élément visuel ajouté à une structure existante.

La balise

Le choix dépend donc de la fonction de la ligne. Si elle souligne le bord d’un encadré, utilisez une bordure sur cet encadré. Si elle sépare réellement deux blocs indépendants, créez un séparateur dédié. Cette distinction évite un code difficile à maintenir lorsque la mise en page évolue.

La méthode la plus fiable avec border-left

La solution la plus courte consiste à appliquer une bordure gauche à un élément existant. Elle fonctionne très bien pour une citation, une alerte, une carte ou un bloc de texte qui doit être visuellement mis en avant.

.note {
  border-left: 4px solid #2563eb;
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: #1e293b;
}

La propriété border-left accepte notamment une épaisseur, un style et une couleur. Ici, la ligne mesure 4 pixels et reste liée à la hauteur du bloc. C’est souvent plus robuste qu’un élément positionné en absolu, car elle suit automatiquement l’agrandissement du contenu.

Pour les interfaces susceptibles de changer de direction, je préfère la propriété logique suivante :

.note {
  border-inline-start: 4px solid #2563eb;
  padding-inline-start: 1rem;
}

border-inline-start s’adapte au sens d’écriture. La bordure apparaît à gauche dans une interface de gauche à droite et peut se déplacer automatiquement dans un contexte de droite à gauche. Cette approche est particulièrement intéressante pour un site multilingue, même si une page française classique peut parfaitement fonctionner avec border-left.

Pourquoi la hauteur est rarement un problème avec une bordure

Une bordure appartient à la boîte de l’élément. Elle grandit donc avec le texte, les images ou les boutons contenus dans ce bloc. Dans mes mises en page, c’est la technique que je choisis lorsqu’un trait doit simplement accompagner un contenu dont la hauteur n’est pas connue à l’avance.

Créer un séparateur entre deux colonnes

Lorsque la ligne se trouve entre deux zones distinctes, un élément dédié est plus lisible. Avec flexbox, le séparateur peut prendre toute la hauteur disponible sans imposer une dimension fixe aux colonnes.

  

    
Solution A
    
Une première approche légère et simple à maintenir.
  

  


  

    
Solution B
    
Une variante plus flexible pour les interfaces complexes.
  

.comparaison {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

.comparaison > section {
  flex: 1 1 0;
}

.separateur {
  flex: 0 0 1px;
  background: #cbd5e1;
  align-self: stretch;
}

@media (max-width: 640px) {
  .comparaison {
    flex-direction: column;
  }

  .separateur {
    width: 100%;
    height: 1px;
  }
}

La déclaration flex: 0 0 1px réserve exactement 1 pixel au trait, sans lui permettre de s’élargir. La règle align-self: stretch lui donne la hauteur de la ligne flex. Sur mobile, la séparation devient horizontale, ce qui est généralement plus naturel qu’une ligne verticale coincée entre deux blocs empilés.

Je recommande de réserver cette méthode aux cas où la ligne joue un vrai rôle dans la composition. Pour une simple bordure décorative autour d’un bloc, un border-inline-start reste plus direct et demande moins de CSS.

Utiliser un pseudo-élément pour une ligne décorative

Un pseudo-élément ::before ou ::after est pratique lorsque le trait ne mérite pas d’élément HTML supplémentaire. C’est une bonne option pour une timeline, un indicateur graphique ou une ligne placée derrière plusieurs repères.

  

    
Conception
    
Définition de la structure de la page.
  

  

    
Lire aussi : Formation WordPress : le guide complet pour un site réussi
Développement
    
Intégration du HTML, du CSS et des interactions.
  

.timeline {
  position: relative;
  max-width: 42rem;
  margin: 0 auto;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.75rem;
  width: 2px;
  background: #94a3b8;
}

.etape {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 2rem;
}

Le conteneur doit avoir position: relative, sinon le pseudo-élément risque de se positionner par rapport à un ancêtre inattendu. Les propriétés top et bottom permettent de limiter le trait sans calculer une hauteur en pixels, ce qui rend la frise plus résistante aux changements de texte.

Je n’ajoute pas de pseudo-élément pour une information indispensable. Une ligne qui porte une signification doit être représentée par une structure compréhensible, un texte ou un élément identifiable. Le décor ne doit jamais remplacer l’information.

Éviter les problèmes de hauteur et de responsive

Le défaut le plus courant est une ligne qui s’arrête trop tôt. Cela arrive lorsqu’on lui donne une hauteur fixe, par exemple height: 300px, alors que le contenu voisin peut grandir. Dans ce cas, je privilégie une hauteur déterminée par le parent, ou une bordure attachée directement au bloc.

Dans une ligne flex, vérifiez aussi l’alignement du conteneur. align-items: stretch permet généralement au séparateur de suivre la hauteur disponible, tandis que align-items: center peut le limiter à la hauteur de son contenu propre.

Le responsive demande un choix explicite. Une séparation verticale entre deux colonnes peut devenir une ligne horizontale sous 640 à 768 pixels, selon la largeur nécessaire au contenu. Si les colonnes passent déjà l’une sous l’autre, conserver une ligne verticale crée souvent un espace vide peu élégant.

La couleur mérite aussi un contrôle rapide. Une ligne gris très clair peut disparaître sur certains écrans, tandis qu’un trait noir de 4 pixels domine toute la composition. Pour un séparateur discret, 1 à 2 pixels suffisent souvent, avec un contraste cohérent avec le reste de l’interface.

Garder une ligne verticale accessible et maintenable

Lorsqu’elle est purement décorative, la ligne doit être ignorée par les lecteurs d’écran. Un élément séparateur recevra donc généralement aria-hidden="true". Si la ligne indique une relation importante, son rôle doit plutôt être exprimé par les titres, le texte et la structure HTML.

Évitez également d’utiliser le caractère | répété dans le contenu pour simuler un trait. Cette astuce donne un résultat fragile, dépend de la police et peut être lue comme une suite de caractères. Le CSS est conçu pour gérer la forme sans polluer le contenu.

Pour le style, je centralise les valeurs dans des variables lorsque le trait apparaît à plusieurs endroits :

:root {
  --couleur-separation: #cbd5e1;
  --epaisseur-separation: 1px;
}

.separateur {
  flex: 0 0 var(--epaisseur-separation);
  background-color: var(--couleur-separation);
}

Cette organisation rend les ajustements rapides et évite les écarts visuels entre composants. Dans un projet suivi par plusieurs personnes, une classe comme .separateur est aussi plus claire qu’une succession de styles en ligne impossibles à réutiliser.

Le choix simple qui fonctionne dans la plupart des projets

Pour un bloc qui doit simplement être souligné par un trait, choisissez border-inline-start. Pour une séparation entre deux colonnes, utilisez un élément flex dédié et prévoyez immédiatement son comportement mobile. Pour une timeline, le pseudo-élément offre davantage de liberté, à condition de maîtriser le positionnement.

La meilleure ligne verticale est rarement celle qui utilise le plus de code. Je cherche d’abord à savoir si elle appartient au contenu, à la mise en page ou au décor, puis je choisis la technique la plus proche de cette fonction. Cette décision réduit les problèmes de hauteur, améliore l’accessibilité et permet de faire évoluer l’interface sans retoucher toute sa structure.