Dibujar líneas y separadores en HTML usando CSS

Resumen

En este post te mostraré a dibujar una línea horizontal en un documento HTML ya que sirve como un remplazo para la etiqueta hr.

Esta línea de la que hablo también sirve para cuando debemos imprimir algo y la persona debe poner una firma. Por ejemplo.

Veremos cómo dibujar una línea que ocupa todo el ancho o que ocupa una longitud fija.

No vamos a usar JavaScript, solo un elemento div y estilos CSS.

Estilizar línea horizontal con CSS

Debemos definir un div que no tenga nada en su interior, pero que tenga un borde. Gracias a esto dibujamos una línea con CSS, pues es un div muy delgado.

El estilo queda así:

.linea {
  border-top: 1px solid black;
  height: 2px;
  max-width: 200px;
  padding: 0;
  margin: 20px auto 0 auto;
}

Tiene un borde superior de un pixel. Una altura de 2 pixeles y una máxima longitud de 200 px.

Esto de max-width es para que la línea no ocupe todo el ancho.

Definimos un padding de 0 para quitarle todo el relleno que pudiera tener.

Finalmente definimos el margen según las manecillas del reloj: arriba 20 px (esto es por si se necesita una firma, no es obligatorio si solo se desea la línea) a la derecha auto (para centrar) abajo 0 y a la derecha auto.

Definimos un div con esa clase y listo:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Línea horizontal con CSS</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <h1>Línea horizontal con CSS</h1>
 <a href="//parzibyte.me/blog">By Parzibyte</a>
 <div class="linea"></div>
</body>

</html>

Con el siguiente resultado:

Así tenemos una línea reutilizable.

Alinear a la izquierda

Si no quieres que la línea se centre, coloca el margen así:

margin: 0;

Línea que ocupa todo el ancho disponible

Si quieres usar esta línea como un separador o simplemente quieres que ocupe todo el ancho, no pongas un max-width.

Veamos el ejemplo. Primero modificamos la clase:

.linea {
  border-top: 1px solid black;
  height: 2px;
  padding: 0;
  margin: 20px auto 0 auto;
}

Y al aplicarla:

Línea con estilo CSS que ocupa todo el ancho disponible

Ejemplo de nombre con firma

Como lo dije, esta línea sirve para poner el nombre de una persona, imprimir el documento y hacer que se firme.

Veamos un ejemplo. Voy a modificar un poco el CSS para agregar más margen y una centrar párrafos:

.linea {
  border-top: 1px solid black;
  height: 2px;
  max-width: 200px;
  padding: 0;
  margin: 50px auto 0 auto;
}

.centrado{
 text-align: center;
}

Ahora dentro del HTML tenemos lo siguiente:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Línea horizontal con CSS</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <h1>Línea horizontal con CSS</h1>
 <a href="//parzibyte.me/blog">By Parzibyte</a>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis libero nisi. Suspendisse potenti. Fusce et rhoncus
  turpis. Aenean egestas dolor felis, at consequat orci scelerisque nec. Quisque tempus lacinia leo, ut molestie nulla dignissim
  vel. Praesent malesuada dolor ac lacus ultrices, nec ultricies purus scelerisque. Class aptent taciti sociosqu ad litora
  torquent per conubia nostra, per inceptos himenaeos. Proin ipsum urna, fermentum in enim ac, scelerisque sagittis odio.
  Pellentesque et sapien vel ligula pulvinar finibus vitae sit amet arcu. Suspendisse tempor vehicula orci, et rutrum ante
  vehicula in. Sed eu dictum orci. Suspendisse quis dui fermentum, ornare tellus in, viverra urna. Nam maximus, nisi eu lacinia
  laoreet, augue augue porta risus, et convallis diam urna vel risus. Fusce orci metus, bibendum vitae justo a, pulvinar
  suscipit nunc.</p>
 <p>Sin más por el momento, me despido de usted de manera amable</p>
 <div class="centrado">
  <strong>Atentamente</strong>
  <div class="linea"></div>
  <p>Luis Cabrera Benito</p>
 </div>
</body>

</html>

Al final del texto he agregado el div junto con el nombre y un mensaje. La salida es la siguiente:

Gracias a que agregamos más margen superior, hay un espacio más grande para firmar.

Líneas dobles

Eres libre de colocar dos divs con la misma clase, así podrías tener dos líneas. Solo asegúrate de modificar los márgenes.

Otro ejemplo de uso

Esto que expongo aquí fue usado en un horario de clases en el que trabajé hace unos días. El mismo debe ir firmado por el director y el supervisor.

Quedó así:

Eres libre de modificar el código para adaptarlo a tus necesidades.

Si quieres, puedes aprender más sobre CSS o la web en general leyendo mi blog.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/