I need help with making dividing lines in nav

#1

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

#2

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
#3

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
#4

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;
}
#5