There are many ways to draw a horizontal separator in HTML and CSS. The right way will depend on each case. In this article, I'm gonna show you the main ways to do it.
Generally, the HTML tag <hr> (horizontal rule) is a semantic tag that's used to draw a horizontal line, separating elements horizontally. But the tag <hr> is not ideal for separating elements in lists <li>, for example. In this case, we must use CSS.
Keep reading to understand how to stylize the <hr> tag with CSS or draw separators with CSS only:
Horizontal line with <hr>
The <hr> (horizontal rule) tag is the ideal HTML element for separating paragraphs and content blocks. You can even use other methods to visually separate the content, but you would be losing the semantic function of the <hr> tag.
In HTML5, the tag is not just a visual line, but a semantic tag, meaning that the search engines also consider it when the tag is present, it denotes a content separation, so it's important to use it in the right places. See the example below:
HTML:
<p>Lorem ipsum dolor sit amet.</p>
<hr>
<p>Consectetur adipiscing elit.</p>
Previously, you could also add attributes to style the tag, but these attributes are no longer present in HTML5, leaving it only to CSS to stylize the tag.
Note that we also no longer need to do <hr /> to close this type of tag. This is an XHTML standard, still valid in HTML5, but that has already fallen into disuse.
See an example below of how to style the color of the <hr> using CSS:
hr {
border: 0;
border-top: 1px solid #094CFA;
}
Each browser has a default CSS for the <hr> tag; some browsers add a border on the sides and bottom to create some sort of shadow, so we set border: 0 as a property. This way we reset the border style on all sides of the <hr>.
If you need, I leave here several examples of CSS applied to the horizontal line.
See the Pen <hr> CSS Examples by Ricardo Metring (@metring) on CodePen.
Keep reading to learn how to apply the horizontal line for visual division within list items, sections, etc.
Horizontal line in <li> or <div>
As a rule of thumb, the <hr> tag should be used as a semantic way of dividing paragraphs or different text blocks. This way Google considers it as separate information.
So it's not a good idea to include <hr> inside <li> elements, in menus, just to get the visual effect, because the <li> tag, when closed, already denotes a separation between the previous item and the next item.
In case of lists, menu divisions, or any other type of division where you just want to get the visual result, you're supposed to use CSS.
There are two common ways to separate something visually: Using pseudo-elements ::after / ::before or the border property. I prefer using border for that matter:
Separation with CSS border
The example below is good for menus made of <li> or <div>, as any other display: block tag.
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;
}
If you don't wanna show the border on the last item, you can use the following CSS:
ul.separator li:last-child {
border-bottom: 0;
}
See below how the separation works:
See the Pen <li> Separating with border by Ricardo Metring (@metring) on CodePen.
Separating with pseudo-elements
In the example below, we use ::after to create pseudo-elements within the <li> tag, and we stylize these elements so that they look like horizontal lines. The effect is quite similar to the previous example.
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> Separating with pseudo-elements by Ricardo Metring (@metring) on CodePen.
