title: Sliding border from right to left using CSS
body: <p>I have a header that I want to have a border on that slides from right to left on hover, using pure CSS if that's possible.</p>
  
  <p>At the moment, I can get a border that slides from left to right using the following CSS:</p>
  
  <pre><code>#header a:after {
  content: '';
  display: block;
  border-bottom: 3px solid $(header.hover.color);
  width: 0;
  -webkit-transition: 1s ease;
          transition: 1s ease;
  }
  
  #header a:hover:after { width: 100%; }
  </code></pre>
  
  <p>Has anyone a good solution for accomplishing this task?</p>