title: Overwrite previous element
body: <p>Hello there:) I am trying to do something but I don't actually know if it's possible to be done this way. By default there is bottom border on all elements and I want to know if it's possible to overwrite the default bottom border when you hover an element. So in the example, only the blue border should be on and the red one should disappear.</p>
  
  <p>Here is the code example:
  <a href="http://jsfiddle.net/vnemilov/0a7duc7h/" rel="nofollow">http://jsfiddle.net/vnemilov/0a7duc7h/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
    text-decoration: none;
  }
  ul {
    list-style-type: none;
    width: 200px;
  }
  ul li {
    padding: 5px;
    border-bottom: 1px solid red;
  }
  ul li a:hover {
    border-bottom: 3px solid blue;
    padding-bottom: 6px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="sidebar"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Sidebar Item #1&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Sidebar Item #2&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Sidebar Item #3&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Sidebar Item #4&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Sidebar Item #5&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Sidebar Item #6&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>