[解決済み] a:before' と 'a:after' に ':hover' 条件を書くにはどうしたらいいですか？

質問

どのように記述すればよいのでしょうか？ :hover と :visited の条件 a:before ?

私は、次のことを試しています。 a:before:hover しかし、うまくいきません。

どうすればいいですか？

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

単にスタイルを適用したい場合は :before 擬似要素で a 要素が擬似クラスにマッチする場合は、次のように記述する必要があります。 a:hover:before または a:visited:before の代わりに 擬似要素が の後に は、擬似クラスです（実際には、セレクタ全体の一番最後にあります）。これらを両方とも "擬似セレクタと呼ぶと、このような構文の問題に遭遇したときに混乱することになります。

CSS3で記述する場合は、擬似要素をダブルコロンで表記することで、この区別を明確にすることができます。したがって a:hover::before と a:visited::before . しかし、IE8やそれ以前のレガシーブラウザ向けに開発している場合は、シングルコロンで十分です。

この擬似クラスと擬似要素の具体的な順序については 仕様 :

セレクタ内の単純セレクタの最後のシーケンスに、1つの疑似要素を付加することができる。

A 単純なセレクタの列 は、コンビネータで区切られていない単純なセレクタの連鎖です。常にタイプセレクタかユニバーサルセレクタから始まります。他のタイプセレクタやユニバーサルセレクタをシーケンスに含めることはできません。

A 単純なセレクタ は、タイプセレクタ、ユニバーサルセレクタ、属性セレクタ、クラスセレクタ、IDセレクタ、または擬似クラスのいずれかです。

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

ただし、ユーザーアクションの擬似クラスである :hover ¹ この効果を適用する必要がある場合 のみ を使用せず、疑似要素そのものを操作したとき。 a 要素を使用する場合、レイアウトに依存する不明瞭な回避策を講じる以外に、これは不可能です。本文にあるように、標準CSSの擬似要素は現在擬似クラスを持つことができません。その場合は :hover を擬似要素ではなく、実際の子要素に追加します。

¹ <サブ もちろん、以下のようなリンク擬似クラスには適用されません。 :visited 擬似要素はリンクではないので、質問のように