[解決済み] a:beforeからアンダーラインだけを取り除くには？

質問

を使ったスタイル付きリンクのセットを持っています。 :before を使用して、矢印を適用しています。

どのブラウザでもきれいに表示されますが、リンクにアンダーラインを適用する際、下線は :before の部分(矢印)には下線をつけたくありません。

例としてjsfiddleを参照してください。 http://jsfiddle.net/r42e5/1/

これを削除することは可能でしょうか？私が座ったテストスタイルでは #test p a:hover:before は適用されますが（Firebugによると）、下線はまだそこにあります。

これを回避する方法はありますか？

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

どのように解決するのですか？

これを削除することは可能でしょうか？

はい、インライン要素の表示スタイルを display:inline (デフォルト) から display:inline-block :

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

これは の場合、CSS の仕様では :

インライン要素に指定されるか、またはインライン要素に伝搬されると、その要素によって生成されるすべてのボックスに影響し、さらにインラインを分割する任意のインフローブロックレベルボックスに伝搬される（ 9.2.1.1 節参照）。[...] 他のすべての要素については、流入してくる子要素に伝搬される。なお、テキスト装飾は 伝搬されない をフローティングや絶対位置の子要素に伝搬させず、また は、インラインブロックやインラインテーブルのようなインラインレベルのアトミックな子孫のコンテンツには伝搬されません。 .

(強調)

デモです。 http://jsfiddle.net/r42e5/10/

_{仕様書を確認し、その回避策が合法であることを確認するよう促してくれた @Oriol 氏に感謝します。}