Plantilla CSS para agregar una línea de borde debajo del encabezado
📝 Uso
Esta plantilla demuestra cómo usar la propiedad border-bottom en CSS para agregar una línea de borde debajo de un encabezado.
📘 Explicación
El código CSS anterior usa la propiedad border-bottom para agregar una línea debajo del elemento h1. Puedes ajustar el color y el grosor según sea necesario.
🔹 Código Parcial
<h1>Encabezado</h1>
<style>
h1 {
border-bottom: 2px solid #000;
padding-bottom: 10px;
}
</style>
💻 Código HTML Completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CSS: Agregar línea de borde debajo del encabezado con border-bottom</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
h1 {
border-bottom: 2px solid #000;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h1>Encabezado</h1>
<p>Esta plantilla demuestra cómo usar la propiedad <code>border-bottom</code> en CSS para agregar una línea de borde debajo de un encabezado.</p>
</body>
</html>
💻 Código Completo Funcional
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CSS: Agregar línea de borde debajo del encabezado con border-bottom</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
h1 {
border-bottom: 2px solid #000;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h1>Encabezado</h1>
<p>Esta plantilla demuestra cómo usar la propiedad <code>border-bottom</code> en CSS para agregar una línea de borde debajo de un encabezado.</p>
</body>
</html>
🎨 Técnicas prácticas de diseño de encabezados
El uso de border-bottom para decorar encabezados es una forma eficaz de delimitar secciones y lograr un diseño elegante. Una línea bien aplicada ayuda a representar visualmente la jerarquía del contenido.
🌈 Variaciones de diseño
Además del estilo solid básico, se puede cambiar a dotted o dashed para líneas punteadas o discontinuas, o a double para líneas dobles. En lugar de #000 (negro), puedes ajustar el color a tonos como #3498db (azul) o #e74c3c (rojo) según el esquema de colores del sitio.
📏 Tamaños ideales
El grosor de la línea suele estar entre 1px y 3px. Utiliza padding-bottom para ajustar el espacio entre el texto y la línea. Asignar diferentes grosores según el nivel de encabezado (h1 a h6) ayuda a clarificar la estructura del contenido — por ejemplo, h1 con 3px y h2 con 2px.
✨ Técnicas de decoración avanzada
Con linear-gradient() se pueden crear líneas con degradado, y con box-shadow se logran efectos tridimensionales. Usar pseudo-elementos como ::after permite diseños más originales y personalizados.
La decoración de líneas en los encabezados es una guía visual importante, pero un exceso puede dificultar la lectura. Es importante mantener un estilo consistente en todo el sitio y aplicar estos efectos solo en secciones clave.