a：beforeから下線のみを削除する方法は？

94

私はを使用してスタイル付きリンクのセットを持っています :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>

スニペットを展開

— OptimusCrime
ソース

まあ、あなたは明らかにリストが必要です... DIV / Pの組み合わせの代わりにUL要素を使用します。リストをあなたが（...、またはディスク）弾丸を取得無料で...

— サイムVIDAS

あなたの場合、段落の代わりにカスタム箇条書きのリストを使用しないのはなぜですか？それ以外の場合は、コンテンツ自体をリンクするのではなく、親コンテンツに適用します。

— YuS、2012年

stackoverflow.com/questions/8536015/…の

— Oriol

171

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

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

— フロッグス
ソース

2

でtext-decoration:underline適用された親要素をオーバーライドできますdisplay:inline-block。例を参照してください：jsfiddle.net/aZdhN/1。次に、アスカーの問題は次のようにして解決できます：stackoverflow.com/a/17347068/1529630

— Oriol

3

私の知る限り、これはInternet Explorerでは動作しません（テスト済み8-10）。IEを処理する方法についてのアイデアはありますか？

— Linus Caldwell

IE8-11でも機能するソリューションを見つけました：stackoverflow.com/a/21902566/1607968

— LeJared

52

IE8-11にはバグがあるので、display:inline-block;単独でも機能しません。

text-decoration:underline;：before-contentを明示的に設定し、このルールをもう一度上書きすることで、このバグの解決策を見つけました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>

— ルジャード
ソース

たケースを有していたIE8下線ハイパーリンク画像ののみによってオフにすることができる<img style="text-decoration:underline">内部（ここで鍵となった）<a style="padding:0; border:none;">

— ボブ・ステイン

残念ながら、jsfiddleはIE8では動作しないため、js8はIE8では検証できません。

— user2867288 2015年

残念ながら、まだIE8で動作するオンラインコード共有ツールは見つかりませんでした。上記の回答にコードを追加して、htmlファイルに貼り付け、IE8でローカルに開くことができます。

— LeJared、2015年

IE9でテストおよび承認され、2つの異なる状態のないイベント。

— セラフィン2015

：beforeにアイコン付きのリンクがありましたが、静止状態では下線が引かれるはずがなく、ホバーでは下線が引かれましたが、アイコンには下線が引かれていませんでした。これを正しく行うためにIEを説得するために私がしなければならなかったのは次のとおりです。その後、なしで上書きします）a：hover {text-decration：underline} a：hover：before {text-decoration：none}

— Fake Haak

7

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

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

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

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

— オリオール
ソース

1

pre-wrapヒントは+1 。私はcontent:'►\a0'（\ a0 =＆nbsp;）を使用していた

— Hashbrown

1

リンクをスパンで囲み、次のようにa：hoverのスパンにテキスト装飾を追加します。

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

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

— Udders
ソース

良いアイデア。それは私が以前それをした方法でした。問題は、このリンクがcms-systemで作成されており、お客様がこれをリッチテキストとして埋めていることです。

— OptimusCrime 2012年

CMSは何語ですか？リンクを吐き出し、それをブラウザに送信する前にスパンにラップすることができますか？

— 乳房

同社はmodxを使用しています。私はそれを最後の方法として行うことができたと思いますが、私は本当にそれを無効にしたかったのです。それは不可能だと思います。とにかく、ありがとう。

— OptimusCrime 2012年

-1

代わりに使用してみてください：

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

それでいいの？

— エレン
ソース

divに段落が含まれている可能性があるため、機能しません。いいアイデアですね。

— OptimusCrime 2012年

受け入れられた回答が同じであるが異なる形式を示唆している場合に-1を置くのは興味深い...

— Elen

-4

これを使って

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

}

— Bipin Chandra Tripathi
ソース

何もしません。text-decorationは無視されます。

— OptimusCrime 2012年