<h2>Separators with border-right</h2>
<ul class="menu">
<li><a href="#">Item name</a></li>
<li><a href="#">Item name</a></li>
<li><a href="#">Item name</a></li>
<li><a href="#">Item name</a></li>
<li><a href="#">Item name</a></li>
<li><a href="#">Item name</a></li>
</ul>
<h2>Separators with pseudo-elements</h2>
<ul class="menu2">
<li><a href="#">Item name</a></li>
<li><a href="#">Item name</a></li>
<li><a href="#">Item name</a></li>
<li><a href="#">Item name</a></li>
<li><a href="#">Item name</a></li>
<li><a href="#">Item name</a></li>
</ul>
body {
margin: 30px;
font-family: sans-serif;
}
h2 {
margin: 20px 0;
font-size: 20px;
font-weight: bold;
}
.menu {
display: flex;
}
.menu li a {
display: block;
padding: 5px 10px;
color: #000;
text-decoration: none;
}
.menu li:not(:last-child) a {
border-right: 1px solid #000;
}
.menu2 {
display: flex;
}
.menu2 li a {
display: block;
padding: 5px 10px;
color: #000;
text-decoration: none;
position: relative;
}
.menu2 li:not(:last-child) a:after {
content: "";
width: 1px;
height: 50%;
background-color: #000;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.