Same hover effect for all link children in CSS

I have the following HTML:

<a href="">Bioshock 2<span> - Xbox 360 review</span></a>

I'd like to style the first part of the link in one way and the span in another, like this开发者_StackOverflow中文版:

I've managed to do this, using the following CSS:

a {
    text-decoration: none;
}

a span {
    color: #c8c8c8;
}

a:link, 
a:visited {
    color: #787878;
}

a:hover,
a:active {
    color: #fff;
    background-color: #a10000;
}

However, it doesn't work as expected when I hover over it:

I'd like the entire link to have the same hover effect and not have the span keep its colour. I'd also like this to happen whether you're hovering over the span or the rest of the link. The desired effect would look like this:

Any ideas how I could do this?

Try:

a:hover, a:active, a:hover span {
  // ...
}

instead of:

a:hover, a:active {
  // ...
}

Add this css code to it:

a span:hover {
      color: #fff;
      background-color: #a10000;
}

And here is the demonstration. :)