web-dev-qa-db-ja.com

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>
htmlcsshyperlinkpseudo-elementtext-decorations
88
OptimusCrime

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

はい、インライン要素の表示スタイルを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に感謝します。

155
Phrogz

IE8-11のバグがあるため、display:inline-block;を単独で使用しても機能しません。

：before-contentにtext-decoration:underline;を明示的に設定し、このルールをtext-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;}

ここでの作業例： http://jsfiddle.net/95C2M/

更新：jsfiddleはIE8で動作しなくなったため、この単純なデモコードをローカルのhtmlファイルに貼り付けて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>
52
LeJared

:before要素に以下を追加して、それを行うことができます：

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

display: inline-blockを使用すると、下線が消えます。しかし、問題は、三角形の後のスペースが崩壊し、表示されないことです。修正するには、white-space: pre-wrapまたはwhite-space: preを使用できます。

デモ： http://jsfiddle.net/r42e5/9/

7
Oriol

リンクをスパンでラップし、このようにa：hoverのスパンにテキスト装飾を追加します。

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

私はあなたのフィドルをあなたがやろうとしていると思うものに更新しました。 http://jsfiddle.net/r42e5/4/

1
Udders