Comment supprimer uniquement le soulignement de a:before?

Question

J'ai un ensemble de liens stylisés utilisant le :before pour appliquer une flèche.

Cela fonctionne bien dans tous les navigateurs, mais lorsque je applique le soulignement au lien, je ne veux pas avoir de soulignement sur la partie :before (la flèche).

Voir jsfiddle pour un exemple : http://jsfiddle.net/r42e5/1/

Est-il possible de supprimer cela ? Le style de test que j'ai défini avec #test p a:hover:before est bien appliqué (selon Firebug), mais le soulignement est toujours là.

Un moyen d'éviter cela ?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: " ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

  Un lien
  Un autre lien

Answer 1

Utilisez ceci

#test p:before {
    color: #B2B2B2;
    content: "► ";
}