Como remover apenas o sublinhado de um: antes?

Eu tenho um conjunto de links estilizados usando o :beforepara aplicar uma seta.

Parece bom em todos os navegadores, mas quando aplico o sublinhado ao link, não quero o sublinhado na :beforeparte (a seta).

Veja jsfiddle por exemplo: http://jsfiddle.net/r42e5/1/

É possível remover isso? O estilo de teste com o qual me sentei #test p a:hover:beforeé aplicado (de acordo com o Firebug), mas o sublinhado ainda está lá.

Alguma maneira de evitar isso?

#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;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

É possível remover isso?

Sim, se você alterar o estilo de exibição do elemento embutido de display:inline(o padrão) para display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

Isso ocorre porque as especificações CSS dizem :

Quando especificado ou propagado para um elemento embutido, ele afeta todas as caixas geradas por aquele elemento e é propagado posteriormente para qualquer caixa de nível de bloco de fluxo que divide o embutido (consulte a seção 9.2.1.1). [...] Para todos os outros elementos, ele é propagado para qualquer filho de fluxo. Observe que as decorações de texto não são propagadas para descendentes flutuantes e absolutamente posicionados, nem para o conteúdo de descendentes atômicos de nível embutido, como blocos embutidos e tabelas embutidas .

(Ênfase minha.)

Demo: http://jsfiddle.net/r42e5/10/

_{Obrigado a @Oriol por fornecer a solução alternativa que me levou a verificar as especificações e ver se a solução alternativa é legal.}

Há um bug no IE8-11 , então usar display:inline-block;sozinho não funcionará lá.

Eu encontrei uma solução para esse bug, definindo explicitamente text-decoration:underline;para: before-content e, em seguida, sobrescrever essa regra novamente comtext-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

Exemplo de trabalho aqui: http://jsfiddle.net/95C2M/

Atualização: Como o jsfiddle não funciona mais com o IE8, basta colar este código de demonstração simples em um arquivo html local e abri-lo no IE8:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

Você pode fazer isso adicionando o seguinte ao :beforeelemento:

display: inline-block;
white-space: pre-wrap;

Com display: inline-blocko sublinhado desaparece. Mas então o problema é que o espaço após o triângulo entra em colapso e não é mostrado. Para consertar, você pode usar white-space: pre-wrapou white-space: pre.

Demo : http://jsfiddle.net/r42e5/9/

Envolva seus links em intervalos e adicione a decoração de texto ao intervalo no a: hover assim,

a:hover span {
   text-decoration:underline;
}

Eu atualizei seu violino para o que acho que você está tentando fazer. http://jsfiddle.net/r42e5/4/

tente usar em seu lugar:

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

isso vai servir?

usa isto

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

}