Las líneas verticales son muy útiles para dividir elementos en una página web y para crear menús o barras laterales en el diseño de un sitio. Aquí te presentamos algunas formas de hacer una línea vertical en HTML y CSS.
Usando el tag <hr>
El tag <hr> es muy común en HTML para crear una línea horizontal, pero también puede utilizarse para crear una línea vertical. Para hacerlo, simplemente hay que establecer la propiedad CSS height en 100% y la propiedad CSS width en el tamaño deseado. Sin embargo, esto puede tener limitaciones si se desea establecer parámetros específicos para el borde de la línea.
Usando la propiedad CSS border-left
La propiedad CSS border-left puede utilizarse para crear una línea vertical en HTML. Esta propiedad define el borde izquierdo de un elemento y puede modificarse para ajustar su grosor, estilo y color. Para crear una línea vertical, simplemente hay que establecer la propiedad CSS border-left con un tamaño de grosor deseado y un estilo de línea, como sólido, punteado o rayado. A continuación, se muestra un ejemplo básico de cómo hacer una línea vertical con la propiedad border-left:
<style>.linea-vertical {
border-left: 2px solid black;
height: 500px;
}
</style>
<div class="contenido">
<p>Contenido del sitio aquí...</p>
<div class="linea-vertical"></div>
</div>
En el ejemplo anterior, se crea una línea vertical dentro de un div con la clase “linea-vertical”. La propiedad CSS border-left establece el ancho de la línea y su estilo, mientras que la propiedad height define la altura de la línea. En este caso, la línea mide 2 píxeles de ancho y 500 píxeles de alto.
Usando la propiedad CSS border
Otra forma de crear una línea vertical en HTML es usando la propiedad CSS border en su totalidad. Esta propiedad define el borde de un elemento y puede ser modificada para crear una línea vertical. Para hacerlo, simplemente hay que establecer la propiedad CSS border con un ancho y un estilo de línea en uno de los lados del elemento, como left o right. A continuación, se muestra un ejemplo básico de cómo hacer una línea vertical con la propiedad border:
<style>.lateral {
border-left: 2px solid black;
padding: 10px;
}
.texto {
margin-left: 10px;
}
.lateral2 {
border-right: 2px solid black;
padding: 10px;
}
</style>
<div class="contenido">
<div class="lateral">
<p>Elemento de la izquierda aquí...</p>
</div><div class="texto">
<p>Contenido del sitio aquí...</p>
</div><div class="lateral2">
<p>Elemento de la derecha aquí...</p>
</div>
</div>
En el ejemplo anterior, se crean dos líneas verticales utilizando la propiedad CSS border, una a la izquierda y otra a la derecha, para crear una separación en columnas. La propiedad CSS padding se utiliza para definir el espacio entre el borde y el contenido del elemento.
Usando un contenedor y la propiedad CSS after
Una forma menos convencional de crear una línea vertical en HTML es utilizando un contenedor y la propiedad CSS ::after. Esta propiedad añade contenido después del contenido de un elemento, lo que permite crear una línea vertical. Para hacerlo, se puede definir un contenedor y utilizar la propiedad CSS ::after para crear la línea. A continuación, se muestra un ejemplo básico de cómo hacer una línea vertical con la propiedad ::after:
<style>.linea-vertical-contenedor {
position: relative;
margin: 0 auto;
height: 500px;
}
.linea-vertical-contenedor::after {
content: "";
width: 1px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: black;
}
</style>
<div class="contenido">
<div class="linea-vertical-contenedor">
<p>Contenido del sitio aquí...</p>
</div>
</div>
En el ejemplo anterior, se crea un contenedor con la clase “linea-vertical-contenedor” y se utiliza la propiedad CSS ::after para añadir una línea vertical. La propiedad position: relative se utiliza para posicionar el contenedor y la propiedad height define su altura. A continuación, la propiedad ::after se utiliza para crear una línea vertical de 1 píxel de ancho y del tamaño completo del contenedor, con posición absoluta y fondo negro.
Conclusión
Como se ha visto en este artículo, existen varias formas de crear una línea vertical en HTML y CSS, dependiendo de las necesidades y preferencias del diseñador. Ya sea utilizando el tag <hr>, la propiedad CSS border-left o border, o un contenedor y la propiedad CSS ::after, se pueden crear líneas verticales elegantes y funcionales.
Recuerda que las líneas verticales pueden ser útiles para dividir elementos en una página web, crear menús o barras laterales en el diseño de un sitio, o simplemente para añadir un toque de estilo visual. Experimenta con diferentes estilos y diseños para encontrar la mejor opción para tu sitio web.
