Créer une ligne verticale en HTML avec CSS

Pour créer une ligne verticale sur une page HTML, utilisez CSS pour définir sa hauteur, son épaisseur et sa couleur. Une bordure border-left convient bien à un séparateur décoratif ; stylisez un <hr> lorsqu’il représente une rupture thématique ; utilisez Flexbox ou CSS Grid pour placer un séparateur entre des blocs de contenu. HTML seul ne permet pas de contrôler l’apparence de la ligne.

Créer une ligne verticale avec CSS border-left

Une bordure gauche forme une ligne décorative simple. Donnez à son élément une hauteur explicite, puis définissez l’épaisseur et la couleur de la bordure. Ce script Node.js écrit une page complète dans vertical-line.html ; ouvrez ce fichier dans un navigateur pour la voir.

Voici un générateur de page complet. Exécutez-le avec Node.js : il crée une page avec deux libellés et un séparateur bleu entre eux.

const { writeFileSync } = require("node:fs");

const page = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vertical line with a border</title>
  <style>
    .row { display: flex; align-items: center; }
    .line {
      height: 8rem;
      border-left: 2px solid #2563eb;
      margin-inline: 1rem;
    }
  </style>
</head>
<body>
  <div class="row">
    <span>Account details</span>
    <div class="line" aria-hidden="true"></div>
    <span>Preferences</span>
  </div>
</body>
</html>`;

writeFileSync("vertical-line.html", page);
console.log("Created vertical-line.html");

Le CSS définit une longueur de ligne de 8 rem et une épaisseur de 2 pixels ; modifiez ces valeurs ainsi que la couleur de la bordure pour les adapter à votre page. margin-inline ajoute de l’espace des deux côtés, dans les mises en page de gauche à droite comme de droite à gauche. La ligne est décorative : aria-hidden="true" la retire donc de l’arbre d’accessibilité. Une hauteur exprimée en pourcentage dépend d’un bloc conteneur dont la hauteur est définie ; sinon, elle risque de ne pas correspondre à la taille attendue.

Adapter un élément hr en ligne verticale

L’élément hr, écrit <hr> dans le code HTML, représente une rupture thématique entre des parties d’une page. Utilisez-le lorsque cette signification convient au contenu ; CSS en modifie l’apparence, pas le sens. Les navigateurs lui appliquent un style par défaut : réinitialisez donc sa bordure avant de tracer une fine ligne verticale. Par exemple, utilisez <hr class="vertical-rule"> et appliquez-lui width: 0; height: 8rem; border: 0; border-left: 2px solid #2563eb; margin: 1rem;. La largeur visible vient de la bordure gauche. Cet élément reste dans le flux normal du document et occupe sa propre ligne ; placez-le dans un conteneur Flexbox ou Grid s’il doit séparer des contenus côte à côte.

Placer un séparateur entre des contenus avec Flexbox ou Grid

Flexbox et Grid positionnent le séparateur comme un élément de mise en page, tandis qu’une bordure ou un arrière-plan dessine la ligne visible. Dans une rangée Flexbox, placez deux sections de contenu de part et d’autre d’un élément séparateur ; définissez display: flex; align-items: stretch; gap: 1rem; sur le parent, donnez flex: 1; à chaque section et border-left: 2px solid #2563eb; au séparateur. La ligne s’étire jusqu’à la hauteur de la rangée, déterminée par la section de contenu la plus haute. Pour un séparateur décoratif, ajoutez aria-hidden="true".

Avec Grid, utilisez trois colonnes afin que la piste centrale forme la ligne : grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 1rem;. Placez les panneaux dans les première et troisième colonnes et un élément séparateur avec background: #2563eb au milieu ; la piste de 2 pixels en détermine l’épaisseur. Sur les écrans étroits, empilez les panneaux avec une requête média et remplacez la ligne verticale par une bordure horizontale si cela convient mieux à l’ordre de lecture. Choisissez border-left pour un simple accent, <hr> pour une rupture thématique pertinente, et Flexbox ou CSS Grid lorsque le séparateur doit s’intégrer entre des éléments de mise en page.