Separador Horizontal em HTML e CSS do Jeito Certo + Exemplos

Há muitas maneiras de se desenhar um separador horizontal em HTML e CSS. O jeito certo vai depender de cada caso. Neste artigo eu vou te explicar as principais formas.

Em geral, a tag HTML <hr> (horizontal rule) é uma tag semântica que serve para criar uma linha horizontal, separando elementos horizontalmente. Porém a tag <hr> não é ideal para separar elementos em listas <li>, por exemplo. Neste caso, devemos utilizar CSS.

Acompanhe abaixo para entender como estilizar a tag <hr> com CSS ou desenhar separadores somente com CSS:

Linha horizontal com <hr>

A tag <hr> (horizontal rule) é um elemento HTML ideal para separação entre parágrafos e blocos de conteúdo. Você pode até usar outro método para separar o conteúdo visualmente, mas estaria perdendo a função semântica da tag <hr>.

Na versão HTML5, a tag passou a não ser apenas uma linha visual, mas passou a ser uma tag semântica, ou seja, a função dessa tag agora também serve para que os mecanismos de busca entendam que quando a tag está presente, ela denota uma separação de conteúdo, e por isso é importante que seja usada nos lugares certos. Veja o exemplo abaixo:

HTML:

<p>Lorem ipsum dolor sit amet.</p>
<hr>
<p>Consectetur adipiscing elit.</p>

Antigamente você também podia adicionar atributos para estilizar a tag, mas estes atributos não estão mais presentes no HTML5, ficando a critério do CSS a função de estilizar a tag.

Note que também não precisamos mais fazer <hr /> para fechar esse tipo de tag. Isso é um padrão XHTML, ainda válido no HTML5, mas que já caiu em desuso.

Veja abaixo um exemplo de como estilizar a cor usando CSS:

hr {
	border: 0;
	border-top: 1px solid #094CFA;
}

Cada navegador tem um CSS padrão para a tag <hr>; alguns navegadores adicionam borda nas laterais e abaixo para criar uma espécie de sombra, por isso setamos border: 0 no início do CSS. Desta forma resetamos o estilo da borda em todos os lados.

Caso precise, deixo aqui vários exemplos de CSS aplicados à linha horizontal.

See the Pen <hr> Exemplos de CSS by Ricardo Metring (@metring) on CodePen.

Continue lendo para saber como aplicar a linha horizontal para divisão visual em itens de listas, seções, etc.

Linha horizontal em um <li> ou <div>

Como regra geral, a tag <hr> deve ser usada como forma semântica de dividir parágrafos ou conteúdos diferentes. Desta forma o Google entende que se trata de informações separadas.

Portanto não é uma boa ideia incluir <hr> dentro de elementos <li>, em menus, só para obter o efeito visual, pois a tag <li>, quando fechada, já denota uma separação entre o item anterior com o próximo item.

No caso de listas, divisões de menu, ou qualquer outro tipo de divisão em que você só quer obter o resultado visual, a regra é usarmos CSS. E existem duas maneiras comuns de separarmos algo visualmente: Usando pseudo elementos ::after / ::before ou border.

Entre usar essas duas formas e obter o mesmo resultado, eu prefiro usar border:

Separando com CSS border

O exemplo abaixo serve tanto para menus compostos por <li> ou <div>, como qualquer outra tag do tipo display: block.

HTML:

<ul class="separator">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>

CSS:

ul.separator {
	list-style: none;
	padding: 0;
	width: 100%;
}

ul.separator li {
	padding: .5em 0;
	border-bottom: 1px solid #CCC;
}

Se você não quiser mostrar a borda no último item, pode usar o seguinte CSS conforme o exemplo:

ul.separator li:last-child {
	border-bottom: 0;
}

Veja abaixo como fica a separação:

See the Pen <li> Separação com border by Ricardo Metring (@metring) on CodePen.

Separação com pseudo elementos

Neste exemplo, nós utilizamos ::after para criar pseudo elementos dentro da tag <li>, e estilizamos esses elementos para que visualmente sejam como linhas horizontais. O efeito é bastante parecido ao exemplo anterior.

HTML:

<ul class="separator">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>

CSS:

ul.separator {
	list-style: none;
	padding: 0;
	width: 100%;
}

ul.separator li {
	padding-top: .5em;
}

ul.separator li::after {
	content: "";
	display: block;
	border-bottom: 1px solid #CCC;
	padding-top: .5rem;
}

ul.separator li:last-child::after {
	display: none;
}

See the Pen <li> Separação com pseudo elementos by Ricardo Metring (@metring) on CodePen.