Cómo crear una línea vertical en HTML

Para crear una línea vertical en una página HTML, usa CSS para definir su altura, grosor y color. border-left funciona bien como divisor decorativo; aplica estilos a <hr> cuando represente una separación temática; y usa Flexbox o CSS Grid para colocar un divisor entre bloques de contenido. HTML por sí solo no controla el aspecto de la línea.

Crear una línea vertical con CSS border-left

Un borde izquierdo es una forma sencilla de dibujar una línea decorativa. Asigna una altura explícita al elemento y luego define el ancho y el color del borde. Este script de Node.js escribe una página de ejemplo completa en vertical-line.html; abre ese archivo en un navegador para verla.

Aquí tienes un generador de páginas completo. Ejecútalo con Node.js para crear una página con dos etiquetas y un divisor azul entre ellas.

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

El CSS define una longitud de línea de 8 rem y un grosor de 2 píxeles; cambia esos valores y el color del borde para adaptarlos a tu página. margin-inline añade espacio a ambos lados en diseños de izquierda a derecha y de derecha a izquierda. Como la línea es decorativa, aria-hidden="true" la excluye del árbol de accesibilidad. Una altura porcentual depende de que el bloque contenedor tenga una altura definida; de lo contrario, puede que no se ajuste al tamaño esperado.

Adaptar un elemento hr para crear una línea vertical

El elemento hr, que se escribe como <hr> en el código HTML, representa una separación temática entre partes de una página. Úsalo cuando ese significado corresponda al contenido; CSS cambia su aspecto, pero no su significado. Los navegadores aplican estilos predeterminados, así que restablece el borde antes de dibujar una línea vertical estrecha. Por ejemplo, usa <hr class="vertical-rule"> y aplícale estos estilos: width: 0; height: 8rem; border: 0; border-left: 2px solid #2563eb; margin: 1rem;. El ancho visible lo determina el borde izquierdo. Este elemento permanece en el flujo normal del documento y ocupa su propia línea; colócalo en un contenedor Flexbox o Grid si debe quedar entre contenidos uno al lado del otro.

Colocar un divisor entre contenidos con Flexbox o CSS Grid

Flexbox y CSS Grid colocan el divisor como un elemento del diseño, mientras que un borde o un fondo dibuja la línea visible. En una fila Flexbox, coloca dos secciones de contenido a ambos lados de un elemento divisor; define display: flex; align-items: stretch; gap: 1rem; en el contenedor, asigna flex: 1; a cada sección y aplica border-left: 2px solid #2563eb; al divisor. La línea se extiende hasta la altura de la fila, determinada por la sección de contenido más alta. Marca los divisores decorativos con aria-hidden="true".

En CSS Grid, usa tres columnas para que la línea ocupe la pista central: grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 1rem;. Coloca los paneles en la primera y la tercera columna, y un elemento divisor con background: #2563eb en la del medio; la pista de 2 píxeles determina el grosor. En pantallas estrechas, apila los paneles con una media query y sustituye la línea vertical por un borde horizontal si se adapta mejor al orden de lectura. Elige border-left para un acento sencillo, <hr> para una separación temática significativa y Flexbox o CSS Grid cuando el divisor deba quedar entre elementos del diseño.