Creating a vertical line next to a list item - html

Question

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

Answer 1

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

Answer 2

You can achieve that by adding a border on every <li> item and just removing the border for the last element using the css last child selector: li:last-child selecting the last li element of its parent.
You can even combine that with the :not selector to achieve it with one css block.
JSFiddle Demo

Answer 3

I would probably set a border-right on the whole list and use jQuery to remove it on the last item.
This is a little trickier if you don't know the ID of the last item ahead of time, but if it's always going to be "Contact," you can say
$("#contact").attr('style','border-right:none');

Answer 4

You can add this:
li:before {
content: " | ";
}
li:first-child:before {
content: none;
}
Or:
li:not(:first-child):before {
content: " | ";
}

Answer 5

Here's a more universal and simpler solution that will work in older browsers without a hitch: http://jsfiddle.net/pw3vpvLv/.
HTML:
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
CSS:
ul > li {
display:inline-block;
padding: 5px 10px;
}
ul > li + li {
border-left: 1px solid;
}