css: style all a elements before hovered

Question

I'm trying to style all elements before hovered (from the left side).

Here is my code: jsFiddle

[CSS]:

a,
a:link,
a:hover,
a:visited {
    /* ... */
    color: #222;
}

a:hover, 
a:hover ~ a {
    color: #f00;
}

[HTML]:

<a href="#">text1|</a>
<a href="#">text2|</a>
<a href="#">text3|</a>

All I've done is hovering from the right side (after hovered element), but I want it from the left.

Answer 1

A small change with the html and css can satisfy your requirement.

HTML:

<div><a href="#">this/</a><a href="#">line/</a><a href="#">is/</a><a href="#">hovering/</a><a href="#">from/</a><a href="#">left/</a><div>

CSS:

a,
a:link,
a:hover,
a:visited,
div {
    text-decoration: none;
    font-size: 14pt;
    background: #def;
    color: #222;
}
div:hover a{
    color: #f00;
}
a:hover ~ a {
    color: #222;
}

jsFiddle