擬似要素(before/after)にhoverをかける書き方を紹介します。
読み終わったらすぐ使えるので、ご覧ください。
【参考記事】
cssの擬似要素beforeについて｜画像指定も
cssの擬似要素afterについて｜改行なども
擬似要素にhoverをかける記述方法
afterを使っていきます。
<p>ほぼほぼ</p>p::after {
content: 'ウ〜〜';
}ほぼほぼ
※パソコンはマウスカーソルを、スマホの人はクリックしてください。
「ウ〜〜」が表示できましたね。
擬似要素に指定した文字色を変える
それでは、afterにhoverをかけましょう。
<p>ほぼほぼ</p>p::after {
content: 'ウ〜〜';
}
p:hover::after {
color: red;
}ほぼほぼ
※パソコンはマウスカーソルを、スマホの人はクリックしてください。
文字色が変わりましたね。
書き方は、:擬似クラス::擬似要素の順番です。
順番を逆にしてみましょう。
<p>ほぼほぼ</p>p::after {
content: 'ウ〜〜';
}
p::after:hover{
color: red;
}ほぼほぼ
※パソコンはマウスカーソルを、スマホの人はクリックしてください。
色が変わりませんね。
なぜ::擬似要素:擬似クラスの順番だと効かないのかは、さいごに説明します。
contentの文字を変える
今度はcontentの文字を変えてみましょう。
ついでに文字色も変えてます。
<p>ほぼほぼ</p>p::after {
content: 'ウ〜〜';
}
p:hover::after {
content: 'ぐるんぐるん';
color: red;
}ほぼほぼ
※パソコンはマウスカーソルを、スマホの人はクリックしてください。
「ウ〜〜」が「ぐるんぐるん」に変わりましたね。
※検証画面でhoverの指定を見る方法はこちらをご覧ください。
【参考記事】chrome 検証(デベロッパーツール)の使い方と活用法
擬似要素とnth-of-type
次は、nth-of-typeと絡めて擬似要素を使ってみましょう。
<ul>
<li>ほぼほぼ1</li>
<li>ほぼほぼ2</li>
<li>ほぼほぼ3</li>
</ul>ul li:nth-of-type(2)::after {
content: 'ウーー';
}- ほぼほぼ1
- ほぼほぼ2
- ほぼほぼ3
2番目のリストにafterを追加しました。
nth-of-typeは擬似クラスです。
ですので、これも::after:nth-of-typeの順番だとうまくいきません。
<ul>
<li>ほぼほぼ1</li>
<li>ほぼほぼ2</li>
<li>ほぼほぼ3</li>
</ul>ul li::after:nth-of-type(2) {
content: 'ウーー';
}- ほぼほぼ1
- ほぼほぼ2
- ほぼほぼ3
「ウーー」が出ませんね。
擬似要素とnth-of-typeにhoverをかける
次は、hoverをかけてみましょうか。
<ul>
<li>ほぼほぼ1</li>
<li>ほぼほぼ2</li>
<li>ほぼほぼ3</li>
</ul>ul li:nth-of-type(2)::after {
content: 'ウーー';
}
ul li:nth-of-type(2):hover::after {
color: red;
}- ほぼほぼ1
- ほぼほぼ2
- ほぼほぼ3
※パソコンはマウスカーソルを、スマホの人はクリックしてください。
順番は、:first-of-type:hover::afterです。
または、:hover:first-of-type::afterでも効くみたいです。
一応、ChromeとSafariでは確かめてみました。
<ul>
<li>ほぼほぼ1</li>
<li>ほぼほぼ2</li>
<li>ほぼほぼ3</li>
</ul>ul li:nth-of-type(2)::after {
content: 'ウーー';
}
ul li:hover:nth-of-type(2)::after {
color: red;
}- ほぼほぼ1
- ほぼほぼ2
- ほぼほぼ3
擬似クラス同士では、順番は特に関係ないようですね。
※ここではnth-of-typeとhoverが擬似クラス。
【参考記事】nth-of-typeについてと効かない事例
「::擬似要素:擬似クラス」では指定できない理由
じつはこの記事のメインはここです。
「なぜ、::after:hoverの順ではダメなんでしょう？」
僕自身、ここがずっと疑問でした。
afterにhoverをかけようとしてるのに。
答えは、擬似要素だからです。
htmlコードの中に擬似要素はありませんよね。
あくまでcssで指定してるのが擬似要素です。
そして、僕らが見ているホームページはhtmlファイルでできています。
つまり擬似要素は存在しない。
下の「ウ〜〜」にマウスを乗せたつもりでも、それは<p>の上にマウスオンした状態です。
擬似要素に乗せてるわけではないのです。
というか、カーソルで擬似要素を触われません。
<p>ほぼほぼ</p>p::after {
content: 'ウ〜〜';
}
p:hover::after {
color: red;
}ほぼほぼ
となると、::after:hoverの順がダメな理由が分かります。
html上に存在しないafterにhoverはかけられないからです。
当然、指定も効きません。
上の例でいうと、あくまで<p>にhoverをかけてるんです。
その証拠に、「ほぼほぼ」にマウスを乗せても「ウ〜〜」の色は変化します。
まとめると、
<p>にマウスを乗せたら(hover)、「ウ〜〜」の色が変化する
という指定をしているわけです。
んー、こんな説明で分かってもらえたでしょうか？
僕はこれでかなりスッキリしたんですが…
参考サイト
この記事はCSS3をもとに記載しました。
CSS3とはcssのルールブックみたいなもので、その最新版です。
むずかしめにので、余裕がある時にどうぞ。
まとめ
擬似要素にhoverをかける指定方法について紹介しました。
上記のコードをコピペして、試してみてください。
使い方がしっくりくるはずです。
beforeについては、こちらをどうぞ。
afterについては、こちらをご覧ください。
