34

タイトルとして、を使用してアイコンを追加しています.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;
}
4

6 に答える 6

50

display：inline-block;を挿入します。あなたのCSSで。以下のようなもの：

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

JSFIDDLEは次のとおりです。

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

于 2014-05-14T08:02:06.717 に答える
30

疑似要素は、生成要素の子孫ボックス（より具体的には、最初の子コンテンツボックスの直前）としてレンダリングされるため、:before通常の子孫ボックスと同じ規則に従いますtext-decoration。

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

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

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

  • skip405に示すように、テキストを独自のspan要素でラップしてから、その要素に適用text-decorationします。不利な点は、もちろん、余分なマークアップです。span

  • :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);
}
于 2012-07-14T04:41:23.580 に答える
4

疑似要素セレクターは、選択チェーンの最後の項目である必要があります。

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

于 2012-07-13T16:49:18.667 に答える
4

：before要素にheight＆overflow：hiddenを設定でき、テキスト装飾は表示されません:)

于 2012-11-14T10:08:51.140 に答える
2

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

実例はここにあります：http：//jsfiddle.net/skip405/fQHUH/

于 2012-07-13T19:52:14.703 に答える
0

この解決策は私のために働いた。それは疑似要素を除外します。<a>ただし、このためには、タグのコンテンツを追加の要素にラップする必要があります。

a:hover { text-decoration: none; }
a:hover > * { text-decoration: underline; }


<a href="#"><span>content</span></a>
于 2021-08-03T15:56:33.560 に答える