Creating a vertical line next to a list item

I want to put a little vertical line next to the right of each list item (except the last) but I’m wondering if there is a way to do it other than adding in a new div or something to accommodate the line. I tried just adding a border line for the list but it added one more than I needed.

html

<ul class="list">
  <li><span id = "home">Home</span></li>
  <li><span id = "about">About</span></li>
  <li><span id = "portfolio">Portfolio</span></li>
  <li><span id = "contact">Contact</span></li>
</ul>

CSS

.list li {
  display: inline;
  margin: 0px 25px 0px 0px;
  white-space: nowrap;
  font-family: Oswald;
  color: white;
}

.list {
  text-align: right;
  padding-right: 2%;
}

#home {
  height: 50px;
  background-color: black;
}

solution

Just add a right border to all the li elements and then remove it from the last one using the :last-child pseudo class. This will work for dynamic content.

Example Here

.list li {
  display:inline-block;
  border-right:2px solid;
  padding:10px;
}
.list li:last-child {
  border-right:none;
}

Alternatively, you could also just use the :not() pseudo class, and avoid applying the border to the last element to begin with.

Example Here

.list li:not(:last-child) {
  border-right:2px solid;
}

Support for both of these methods can be found here - http://caniuse.com/#feat=css-sel3


If support is a concern, you could also alternatively just add a left border and remove it from the first child element. (:first-child has more browser support than :last-child/:not). I doubt you need to support older versions of IE though.

Example Here

.list li {
  display:inline-block;
  border-left:2px solid;
  padding:10px;
}
.list li:first-child {
  border-left:none;
}