title: Creating a vertical line next to a list item
body: <p>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.</p>
  
  <p>html</p>
  
  <pre><code>&lt;ul class="list"&gt;
              &lt;li&gt;&lt;span id = "home"&gt;Home&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span id = "about"&gt;About&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span id = "portfolio"&gt;Portfolio&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span id = "contact"&gt;Contact&lt;/span&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
  
  }
  </code></pre>