title: css: style all a elements before hovered
body: <p>I'm trying to style all elements before hovered (from the left side).</p>
  
  <p>Here is my code: <a href="http://jsfiddle.net/LgKkU/467/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p>[CSS]:</p>
  
  <pre><code>a,
  a:link,
  a:hover,
  a:visited {
      /* ... */
      color: #222;
  }
  
  a:hover, 
  a:hover ~ a {
      color: #f00;
  }
  </code></pre>
  
  <p>[HTML]:</p>
  
  <pre><code>&lt;a href="#"&gt;text1|&lt;/a&gt;
  &lt;a href="#"&gt;text2|&lt;/a&gt;
  &lt;a href="#"&gt;text3|&lt;/a&gt;
  </code></pre>
  
  <p>All I've done is hovering from the right side (after hovered element), but I want it from the left.</p>