web-dev-qa-db-ja.com

：hover：before-decoration noneは何の効果もありませんか？

タイトルとして、.icon-*を使用してアイコンを追加しています。ハイパーリンクにアイコンを追加する場合：

<a href="#" class="icon-email icon-large">Email me!</a>

contentプロパティによって挿入されたコンテンツは、ホバー時に下線のテキスト装飾を示しています。以前のコンテンツに対してのみtext-decorationを無効にしたい：

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}
.icon-mail:before {
    content: "\37";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
    font-size: 48px;
    line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
    margin-right: 5px;
    vertical-align: middle;
}

私はこれを試しましたが、うまくいきません（装飾はまだ見えています）：

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
    text-decoration: none;
    color: white;
}
csscss-selectorspseudo-element
29
gremo

生成要素の :before疑似要素は子孫ボックスとしてレンダリングされます （より具体的には、最初の子コンテンツボックスの直前）になるため、 同じルールが通常の子孫ボックスはtext-decoration に関して次のことを行います：

子孫要素の 'text-decoration'プロパティは、祖先の装飾に影響を与えることはできません。

詳細については、これらの回答を参照してください。

これを回避する良い方法はありません...すぐに頭に浮かぶ唯一の選択肢は：

  • テキストを独自のspan要素で囲み、次にtext-decorationをそのspanに適用します skip405で示されているように 。欠点は、もちろん余分なマークアップです。

  • :before疑似要素を使用して、アイコンフォントのインラインテキストの代わりにインラインブロックの背景画像を使用します（クラスセレクターとの不整合も修正しました）。

    [class^="icon-"]:before, [class*=" icon-"]:before {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    content: "";
}
.icon-email:before {
    background-image: url(icon-mail.svg);
    background-repeat: no-repeat;
}
.icon-large:before {
    width: 48px;
    height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
    margin-right: 5px;
    vertical-align: middle;
}

    これがskip405のソリューションよりも優れている点は、HTMLを変更する必要がないことですが、 SVGベクトルの背景画像 と background-size を使用しているため、 IE8では機能しません。

    IE8サポートが必要な場合は、ビットマップイメージにフォールバックする必要があります。

    .icon-email:before {
    background-image: url(icon-mail.png);
}
.icon-email.icon-large:before {
    background-image: url(icon-mail-large.png);
}
30
BoltClock

ディスプレイの挿入：インラインブロック;あなたのCSSで。以下のようなもの：

.icon-mail:before {
    content: "\37";
    display:inline-block;
    text-decoration:none;
}

ここにJS FIDDLEがあります：

http://jsfiddle.net/73p2k/18/

35
Pinoy2015

：before要素の高さとオーバーフロー：非表示を設定できます。テキスト装飾は表示されません:)

4
user123321

疑似要素セレクターは、選択チェーンの最後のアイテムでなければなりません。

スタイルはelement:hover:beforeに適用できますが、element:before:hoverには適用できません。

3
Doug Stephen

マークアップとしてaタグだけを使用していくつかのことを試みましたが、残念ながら。考えられる回避策は、リンクを別の要素、たとえばspanで内部ラップすることです。したがって、（擬似要素の代わりに）この要素に下線を付けることができます-これはcssによって完全に制御されます。

ライブの例はここにあります： http://jsfiddle.net/skip405/fQHUH/

2
skip405