How to create a horizontal line in the middle of an unordered list in your HTML

In this article you will learn how to program a horizontal line in the middle of an unordered list in your HTML project, using only CSS for this purpose.

Hey you  programmer, okay? Let’s learn something new!

Well, the idea here is to separate each item or items that are needed with a horizontal line

A sort of separator between the li tags of a ul list

Note: the same technique can be used for ordered lists (ol tag)

At first you might think about using an hr, but this is unnecessary

We can make the HTML cleaner using only CSS rules

Let’s determine that the lines that are needed have a border that delimits the space of each item.

Let’s go to the practical example:

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

In this example we have a common unordered list, except for the row class in two elements.

And from this class we will make our separator or the horizontal line in the middle of the list, as you prefer

See the required CSS:

.line{
 border-bottom: 1px solid red;
}

And just like that you reach the objective of the article, see how it works:

Note that the border has only been added to certain items, but you can do it on them all if you prefer.

Another idea is that you customize the border according to your project, changing the color, as an example

Conclusion

In this how to add a horizontal line in the middle of an unordered list in HTML, but the same technique can be replicated for ordered lists

We just added a class called line, you can change its name too

And in this class, CSS border styles were added, to serve as a separator for list items

Want to learn more about HTML and CSS? Click here!