title: Sliding underline border to work with the active web page
body: <p>I'm trying to get this sliding border nav bar to work with an active page navbar highlight.  I want it's default position to be on the page that is currently active.<br>
  <a href="http://codepen.io/rm/pen/ldhon" rel="nofollow">http://codepen.io/rm/pen/ldhon</a><br>
  <code>&lt;script&gt;$("a[href*='" + location.pathname + "']").addClass("current");&lt;/script&gt;</code></p>
  
  <p>I'm using this java script to get the current page.  </p>
  
  <p>My nav bar is set up like this.  This is the li class "two"s specific code for it to be highlighted.</p>
  
  <pre><code>  &lt;div class="bar"&gt;
      &lt;ul&gt;
        &lt;li class="one"&gt;&lt;a href="WhoWeAre.html"&gt;Who we are&lt;/a&gt;&lt;/li&gt;&lt;!--
     --&gt;&lt;li class="two"&gt;&lt;a class"current" href="WhatWeDo.html"&gt;What we do&lt;/a&gt;&lt;/li&gt;&lt;!--
     --&gt;&lt;li class="three"&gt;&lt;a href="GetInvolved.html"&gt;Get Involved&lt;/a&gt;&lt;/li&gt;&lt;!--
     --&gt;&lt;li class="four"&gt;&lt;a href="Schedule.html"&gt;Event Schedule&lt;/a&gt;&lt;/li&gt;&lt;!--
     --&gt;&lt;li class="five"&gt;&lt;a href="Contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;hr /&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And I want to use a.current{} in my css but I can't get it to work with the sliding border.  I've tried putting it in with these, just using commas but it isn't working.</p>
  
  <pre><code>.two:hover ~ hr, a.current {
    margin-left: 20%;
  }
  
  .three:hover ~ hr, a.current  {
    margin-left: 40%;
  }
  
  .four:hover ~ hr, a.current  {
    margin-left: 60%;
  }
  
  .five:hover ~ hr, a.current  {
    margin-left: 80%;
  }
  
  .bar hr, a.current  {
    height: 4px;
    width: 20%;
    margin: 0;
    background: rgb(248, 172, 48);
    border: none;
    transition: .3s ease-in-out;
  }
  </code></pre>