What is the proper way to put divider lines between navigation links?

Question

I have a CSS/HTML homework assignment to make a page look like the page my instructor gave me. I need to add "pipes" in between the links. I added pipe characters to my HTML, but I don't feel like that is the proper way to do it. Thanks! Here is a screenshot of what it needs to look like:

https://i.stack.imgur.com/EKYUq.png

There is no "proper" way. you can do it in any way you please as long as it's maintainable and easy to understand by others, like possible teammates — vsync, Jul 01 '19 at 18:21

score 1 · Accepted Answer · answered Jul 01 '19 at 18:27

Pipe characters work, but you could do the same thing with some CSS.

If your markup is like this:

<nav>
  <a href="/about.html">About</a>
  <a href="/portfolio.html">Portfolio</a>
  <a href="/contact.html">Contact</a>
</nav>

You can add some CSS to style the "right side" of each link element to have a border, except for the last element because you don't want a floating divider line on the end of the links.

nav > a {
  border-right: solid 1px #eff0f1;
}
nav > a:last-of-type {
  border-right: none;
}

This will add a border to the right side of all your nav links, but then overrides the final nav link to not have a right border.

score 0 · Answer 2 · answered Jul 01 '19 at 18:27

You're looking to add a border-right to your nav items. This can all be done with CSS and no text, like with the pipe "|". Just need to ensure that the last nav item does not have the border-right. See the example below, cheers.

ul {
  list-style-type: none;
  display: flex;
}

li {
  border-right: 1px solid lightgray;
  padding: 1rem;
}

/* This is the important piece */
li:last-of-type {
  border-right: none;
}

<nav>
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</nav>

What is the proper way to put divider lines between navigation links?

2 Answers2