Criar linha vertical em HTML

Este artigo apresentará algumas maneiras de criar uma linha vertical em HTML.

Use a propriedade CSS border-left para criar uma linha vertical em HTML

Em HTML, usamos a tag hr para criar uma linha horizontal, mas não há nenhuma tag para criar uma linha vertical. No entanto, podemos simular uma linha vertical usando a propriedade CSS border-left.

A propriedade border-left é usada para estilizar a borda do lado esquerdo. A propriedade é a abreviação de border-left width, border-left style, e border-left color.

Usar apenas a propriedade border-left criará uma linha vertical. Podemos criar um container em HTML, selecioná-lo e aplicar a propriedade para obter uma linha vertical.

Por exemplo, crie um div com a classe v-line em HTML, selecione v-line e aplique alguns estilos a ele. Defina a propriedade border-left como thick solid #000.

A seguir, defina a height para 100% e esquerda para 50%. Finalmente, defina a propriedade position como absolute.

Aqui, teremos uma borda preta no meio da página da web. Desta forma, podemos criar uma linha vertical usando a propriedade CSS border-left em HTML.

Código de exemplo:

<div class="v-line">
</div>

.v-line{
 border-left: thick solid #000;
 height:100%;
 left: 50%;
 position: absolute;
}

Ajuste a tag hr para criar uma linha vertical em HTML

Podemos ajustar a tag hr e criar uma linha vertical em HTML.

A tag hr é usada para criar uma linha horizontal. Podemos usar o valor máximo para a height e o mínimo para a width da tag hr.

Desta forma, a altura da linha horizontal aumentará e a largura diminuirá. Podemos aplicar a mesma cor para a linha horizontal e sua borda para torná-la vertical.

Por exemplo, crie uma tag hr em HTML. Em CSS, defina a height da tag hr para 100vh e a width para .5vw.

Em seguida, defina a border-width para 0. Finalmente, defina a color e background-color da linha para #000.

Aqui, definimos o valor 0 como border-width para que a linha vertical seja mais fina. Desta forma, criamos uma linha vertical usando a tag hr em HTML.

Código de exemplo:

<hr>

hr{
 height:100vh;
 width:.5vw;
 border-width:0;
 color:#000;
 background-color:#000;
}