Vertikale Linie in HTML erstellen

Um auf einer HTML-Seite eine vertikale Linie zu erstellen, legen Sie Höhe, Stärke und Farbe mit CSS fest. border-left eignet sich als dekorative Trennlinie. Verwenden Sie ein <hr>, wenn die Linie einen thematischen Wechsel markiert. Mit Flexbox oder CSS Grid können Sie eine Trennlinie zwischen Inhaltsblöcken positionieren. HTML allein bestimmt nicht das Aussehen der Linie.

Eine vertikale Linie mit CSS border-left erstellen

Ein linker Rahmen ist eine einfache dekorative Linie. Legen Sie für das Element eine feste Höhe sowie Breite und Farbe des Rahmens fest. Dieses Node.js-Skript schreibt eine vollständige Beispielseite in die Datei vertical-line.html; öffnen Sie die Datei in einem Browser, um sie anzusehen.

Der folgende Seitengenerator erstellt eine Seite mit zwei Beschriftungen und einer blauen Trennlinie dazwischen.

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");

Das CSS legt die Länge der Linie auf 8 rem und ihre Stärke auf 2 Pixel fest. Ändern Sie diese Werte und die Rahmenfarbe passend zu Ihrer Seite. margin-inline fügt auf beiden Seiten Abstand hinzu, sowohl in Layouts mit Schreibrichtung von links nach rechts als auch von rechts nach links. Da die Linie dekorativ ist, hält aria-hidden="true" sie aus dem Accessibility Tree heraus. Eine prozentuale Höhe hängt von einem Elternelement mit festgelegter Höhe ab; andernfalls wird sie möglicherweise nicht wie erwartet berechnet.

Ein hr-Element als vertikale Linie gestalten

Das Element hr, in HTML-Quelltext als <hr> geschrieben, kennzeichnet einen thematischen Wechsel zwischen Seitenteilen. Verwenden Sie es, wenn diese Bedeutung zum Inhalt passt; CSS ändert sein Aussehen, nicht seine Bedeutung. Browser wenden standardmäßig eigene Formatierungen an. Setzen Sie daher zunächst den Rahmen zurück, bevor Sie eine schmale vertikale Linie zeichnen. Verwenden Sie zum Beispiel <hr class="vertical-rule"> und formatieren Sie es mit width: 0; height: 8rem; border: 0; border-left: 2px solid #2563eb; margin: 1rem;. Die sichtbare Breite entsteht durch den linken Rahmen. Das Element bleibt im normalen Dokumentfluss und belegt eine eigene Zeile. Soll es zwischen nebeneinanderliegenden Inhalten stehen, platzieren Sie es in einem Flexbox- oder CSS-Grid-Container.

Mit Flexbox oder CSS Grid eine Trennlinie zwischen Inhalten platzieren

Flexbox und CSS Grid positionieren eine Trennlinie als Layoutelement; ein Rahmen oder Hintergrund zeichnet die sichtbare Linie. Platzieren Sie in einer Flexbox-Zeile zwei Inhaltsbereiche beiderseits eines Trennlinienelements. Setzen Sie für den übergeordneten Container display: flex; align-items: stretch; gap: 1rem;, für jeden Inhaltsbereich flex: 1; und für die Trennlinie border-left: 2px solid #2563eb;. Die Linie erstreckt sich über die Höhe der Zeile, die sich nach dem höheren Inhaltsbereich richtet. Kennzeichnen Sie eine dekorative Trennlinie mit aria-hidden="true".

Verwenden Sie für CSS Grid drei Spalten, sodass die mittlere Spur die Linie bildet: grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 1rem;. Platzieren Sie die Inhaltsbereiche in der ersten und dritten Spalte und ein Trennlinienelement mit background: #2563eb in der Mitte. Die 2 Pixel breite Spur bestimmt die Stärke der Linie. Auf schmalen Bildschirmen können Sie die Inhaltsbereiche mit einer Media Query untereinander anordnen und die vertikale Linie durch einen horizontalen Rahmen ersetzen, wenn das besser zur Leserichtung passt. Wählen Sie border-left für einen einfachen Akzent, <hr> für einen inhaltlich passenden thematischen Wechsel und Flexbox oder CSS Grid, wenn die Trennlinie zwischen Layoutelementen stehen soll.