：hover条件をa：beforeおよびa：afterに書き込む方法は？

347

書き方:hoverと:visited条件付けa:before？

私は試してa:before:hoverいますが、うまくいきません

488

これは、実際に何をしようとしているかに依存します。

要素が疑似クラスに一致する:beforeときに、疑似要素にスタイルを適用するだけの場合は、またはaを記述する必要があります。擬似要素が後に来ることに注意してくださいa:hover:beforea:visited:before疑似クラスのあることに（実際には、セレクタ全体の最後にあります）。また、これらは2つの異なるものであることにも注意してください。これらの両方を「疑似セレクター」と呼ぶと、このような構文の問題に遭遇すると混乱するでしょう。

CSS3を作成している場合は、2つのコロンを含む疑似要素を指定して、この区別を明確にすることができます。したがって、a:hover::beforeそしてa:visited::before。ただし、IE8以前などのレガシーブラウザー用に開発している場合は、単一のコロンをうまく使用できます。

疑似クラスと疑似要素のこの特定の順序は、仕様に記載されています。

セレクター内の単純なセレクターの最後のシーケンスに1つの疑似要素を追加できます。

単純なセレクターのシーケンスは、コンビネーターによって分離されていない単純なセレクターのチェーンです。常に型セレクターまたはユニバーサルセレクターで始まります。シーケンス内で他のタイプセレクターまたはユニバーサルセレクターを使用することはできません。

単純セレクタは、タイプセレクタ、普遍的なセレクタ、属性セレクタ、クラスセレクタ、IDセレクタ、又は擬似クラスのいずれかです。

疑似クラスは単純なセレクターです。ただし、疑似要素は、単純なセレクターに似ていますが、そうではありません。

ただし、:hover¹などのユーザーアクションの疑似クラスでは、ユーザーが要素ではなく疑似要素自体と対話する場合にのみこの効果を適用する必要がある場合は、aレイアウトに依存したあいまいな回避策を使用しない限り、これは不可能です。。テキストに示されているように、標準のCSS疑似要素は現在、疑似クラスを持つことはできません。その場合、:hover疑似要素ではなく実際の子要素に適用する必要があります。

¹ _{もちろん、:visited疑似要素はリンクではないため、これは質問のようなリンクの疑似クラスには適用されません。}

— ボルトクロック
ソース

27

これにより、ホバーが親要素に置かれることに注意してください。これにより、:: after疑似要素がマウスの下になくても、親が存在する限り、装飾が適用されます。

— SamGoody

6

また、レイアウトルールの指定方法が原因で、これに応答しないものがいくつかあることにも注意してくださいtext-decoration。

— Chris Krycho 2013

1

@Chris Krycho：確かに-疑似要素に関するこの特定の問題について、ここで説明があります。もちろん、問題自体が疑似クラス/疑似要素セレクターとは関係がないことを明確にする価値はありますが、指摘するとおり、レイアウトの問題です。

— BoltClock

@BoltClock私はこのコメントを残した直後にその回答に賛成しました。フザー。

— Chris Krycho 2013

2

シングルコロン（:)は疑似クラスを示し、ダブルコロン（：:)は疑似要素を示します。したがって、a：

— hover

107

a:hover::before代わりに書きなさいa::before:hover：例。

— Sandeep
ソース

2

@mikkelbreumそれを証明する参照がありますか？

— シア

3

@bungeshea：CSS3構文です。私の回答の下のコメント（および私の最近の編集）を参照してください。CSS1 / 2疑似要素ではシングルコロンとダブルコロンの両方が許可されているため、これを「正しい」構文と呼ぶのは少し不正確です。代わりに、これを推奨構文と呼びます。これは、今日も従来の構文を使用し続ける唯一の理由が、IE8以前をサポートするためです。

— BoltClock

@mikkelbreum @sheabunge CSS2詳細:afterCSS3対::after developer.mozilla.org/en-US/docs/Web/CSS/::afterは、（単一の:より良いサポートを持っている）

— トラヴィス

下線では機能しません:( jsfiddle.net/porzechowski/u5dhthvq次の表示も追加してください：inline-block; jsfiddle.net/porzechowski/u89fo4oq

— plusz

7

マウスオーバーでメニューリンクのテキストを変更します。（ホバーの異なる言語テキスト）ここにあります

jsfiddleの例

html：

<a align="center" href="#"><span>kannada</span></a>

css：

span {
    font-size:12px;
}
a {
    color:green;
}
a:hover span {
    display:none;
}
a:hover:before {
    color:red;
    font-size:24px;
    content:"ಕನ್ನಡ";
}

— ラオ
ソース

1

これは素敵な答えです。実際、スパンテキストのフォントサイズを24pxにブーストして置換テキストと一致させ、置換テキストの前後に3つの改行しないスペースを追加して同じ幅になるようにして、フィドルを少し拡張するようになりました。でスタイル設定さa:hover::beforeれますtext-decoration: underline。これにより、下線に置換テキストの赤い色が使用されます。

— Dave Land

4

仕事で使用.card-listing:hover::after hoverしafterてみてください::

— スビンダス午後
ソース

1

BoltClockの答えは正しいです。追加したいのは、疑似要素のみを選択する場合は、スパンを挿入することです。

例えば：

<li><span data-icon='u'></span> List Element </li>

の代わりに：

<li> data-icon='u' List Element</li>

このように、簡単に言うことができます

ul [data-icon]:hover::before {color: #f7f7f7;}

li要素全体ではなく、疑似要素のみを強調表示します

— bbrinx
ソース

-2

このコードで行ったように、右の角括弧（ ">"）を使用して、アクションを1つのクラスのみに制限することもできます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    span {
    font-size:12px;
    }
    a {
        color:green;
    }
    .test1>a:hover span {
        display:none;
    }
    .test1>a:hover:before {
        color:red;
        content:"Apple";
    }
  </style>
</head>

<body>
  <div class="test1">
    <a href="#"><span>Google</span></a>
  </div>
  <div class="test2">
    <a href="#"><span>Apple</span></a>
  </div>
</body>

</html>

注： hover：beforeスイッチは.test1クラスでのみ機能します

— ステファン・グリューンヴァルト
ソース