【css】before・afterにhoverをかける

【css】before・afterにhoverをかける

擬似要素(before/after)にhoverをかける書き方を紹介。

えっと、あっという間に終わります。

擬似要素にhoverをかける時の記述方法

まず、afterを使ってみます。

<p>ほぼほぼ</p>
p::after {
  content: 'ウ〜〜';
}

ほぼほぼ

「ウ〜〜」がちゃんと表示できましたね。

擬似要素に指定したテキストの文字色を変える

じゃあ、afterhoverをかけてみましょう。

<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;
}

ほぼほぼ

テキストが変わりましたね。

nth-of-typeと擬似要素

次は、nth-of-typeと絡めて擬似要素を使ってみましょう。

<ul>
  <li>ほぼほぼ1</li>
  <li>ほぼほぼ2</li>
  <li>ほぼほぼ3</li>
</ul>
ul li:first-of-type::after {
  content: 'ウーー';
}
  • ほぼほぼ1
  • ほぼほぼ2
  • ほぼほぼ3

1番目のリストにafterを追加しました。

nth-of-typeは擬似クラスです。

ですので、これも::after:nth-of-typeの順番だとうまくいきません。

<ul>
  <li>ほぼほぼ1</li>
  <li>ほぼほぼ2</li>
  <li>ほぼほぼ3</li>
</ul>
ul li::after:first-of-type {
  content: 'ウーー';
}
  • ほぼほぼ1
  • ほぼほぼ2
  • ほぼほぼ3

「ウーー」が出ませんね。

hoverをかける

次は、hoverをかけてみましょうか。

<ul>
  <li>ほぼほぼ1</li>
  <li>ほぼほぼ2</li>
  <li>ほぼほぼ3</li>
</ul>
ul li:first-of-type::after {
  content: 'ウーー';
}
ul li:first-of-type: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:first-of-type::after {
  content: 'ウーー';
}
ul li:hover:first-of-type::after {
  color: red;
}
  • ほぼほぼ1
  • ほぼほぼ2
  • ほぼほぼ3

擬似クラス同士では、順番は特に関係ないようですね。

※ここではfirst-of-typehoverが擬似クラス。

なぜ、::擬似要素:擬似要素ではダメなのか?

はい、じつはここが今回のメインです。

なぜ、::after:hoverの順ではダメなんでしょう?

ここがずっと疑問でした。

afterhoverをかけようとしてるのに。

答えは、擬似要素だからです。

htmlコードの中に擬似要素はありませんよね。

あくまでcssで指定してるのが擬似要素です。

そして、僕らが見ているホームページはhtmlファイルでできています。

つまり、擬似要素は存在しえない。

だから、下の「ウ〜〜」にマウスを乗せても、それは<p>の上に乗せているのであって、擬似要素に乗せてるわけではないのです。

というか、擬似要素をカーソルで触れません。

<p>ほぼほぼ</p>
p::after {
  content: 'ウ〜〜';
}
p:hover::after {
  color: red;
}

ほぼほぼ

となると、::after:hoverの順がダメな理由が分かります。

html上に存在しないafterhoverはかけられないからです。

当然、指定も効かなくなります。

上の例でいうと、あくまで<p>にhoverをかけてるんです。

その証拠に、「ほぼほぼ」にマウスを乗せても「ウ〜〜」の色は変化します。

まとめると僕らがやろうとしてるのは、「<p>にマウスを乗せたら(hover)、「ウ〜〜」の色が変化する」という指定をしているわけです。

んー、こんな説明で分かってもらえましたかね?

僕的にはこれでかなりスッキリしたんですが。

参考サイト

この記事はCSS3をもとに記載しました。

CSS3とは、cssのルールブックみたいなもので、その最新版です。

むずかしめなので、余裕がある時にどうぞ。

まとめ

上記の内容はbeforeにも同じように使えるので、試してみてください。

【css】beforeを使いこなそう|画像とかcontentとか

【css】afterをいろいろ触ってみる

タイトルとURLをコピーしました