Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to add link dividers in a Navigation Bar with CSS
Link dividers in navigation bars help separate menu items visually, making the navigation cleaner and more readable. You can add dividers using CSS border properties.
Syntax
li {
border-right: width style color;
}
Example: Vertical Dividers with Border-Right
The following example uses the border-right property to add vertical dividers between navigation items −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #555;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li:last-child {
border-right: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
A horizontal navigation bar with dark background appears. White vertical lines separate each menu item (Home, News, Contact, About). The last item has no right border. Hovering over items changes the background to darker.
Example: Using Pseudo-Elements for Dividers
You can also create dividers using the ::after pseudo-element for more styling flexibility −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #4CAF50;
}
li {
position: relative;
}
li a {
display: block;
color: white;
padding: 15px 25px;
text-decoration: none;
}
li a:hover {
background-color: #45a049;
}
li:not(:last-child)::after {
content: "|";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
A green horizontal navigation bar appears with white pipe symbols (|) separating each menu item. The dividers are perfectly centered vertically. The last item has no divider after it.
Conclusion
Navigation dividers can be created using border-right properties or pseudo-elements. Remember to remove the divider from the last item using :last-child selector for cleaner appearance.
Updated on: 2026-03-15T12:28:47+05:30
2K+ Views
Advertisements