Одинаковый эффект наведения для всех дочерних ссылок в CSS

Question

У меня есть следующий HTML:

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

Я бы хотел оформить первую часть ссылки одним способом, а span - другим, например:

Мне удалось сделать это, используя следующий CSS:

a {
    text-decoration: none;
}

a span {
    color: #c8c8c8;
}

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

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

Тем не менее, он не работает, как ожидалось, когда я наводил курсор на него:

Мне бы хотелось, чтобы вся ссылка имела такой же эффект при наведении, и чтобы span не сохранял свой цвет. Я также хотел бы, чтобы это произошло, независимо от того, находитесь ли вы над span или по остальной части ссылки. Желаемый эффект будет выглядеть так:

Есть идеи, как мне это сделать?

Answer 1

Попробуйте:

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

вместо:

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

Answer 2

Добавьте к этому код CSS:

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

А вот и демонстрация. :)