Hello, I would like to add dividing vertical lines between my nav’s items but I really don’t know how to do it. I have made an attempt with “::after” but it doesn’t work. please help, here’s the code if anyone want’s to take a look https://codepen.io/VeljkoCukic/pen/WNQJaOp?editors=1100
You can use border on your list. So
element {
border: 1px solid white;
}
or you can specify which side.
elemnt {
border-right: 1px solid white;
border-left: 1px solid white;
}
1 Like
Greetings @veljkocukic,
As @Catalactics says, use borders to make the dividers and instead of margin use padding, like this:
#nav-link{
border-left: 1px solid rgba(255,255,255,.8);
padding: 0 20px;
}
2 Likes
Not really sure if you want it both in front and after all the links, or just after? Anyway, here it is with ::before
and ::after
Only after:
.nav-link::after {
content: "|";
padding: 0 5px;
}
Both:
.nav-link:first-child::before {
content: "|";
padding: 0 5px;
}
.nav-link::after {
content: "|";
padding: 0 5px;
}