プログラミング

擬似クラス(hover)と擬似要素(before/after)を組み合わせて用いる

擬似クラスである「:hover」を使って、マウスオーバー時に「before/after」などの擬似要素を変化させたい場合は、擬似クラス、擬似要素の順番でCSSを記述します。

a:hover:before {
 任意のCSSを記述
}
a:hover:after {
 任意のCSSを記述
}

例えば、擬似要素(before)で「beforeです」という文字を表示させておいて、マウスオーバー時に「hoverしたbeforeです」というテキストに変える場合は次のように書きます。

See the Pen
hover+before/after
by KUBO (@KUBOGEN)
on CodePen.

HTML
<a href=””></a>
CSS
a {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 max-width: 300px;
 height: 200px;
 background: #a20a0a;
 text-decoration: none;
}
a:before {
 content: ‘beforeです’;
 font-size: 20px;
 color: #fff;
}
a:hover:before {
 content: ‘hoverしたbeforeです’;
}

cssが少し長くなってしまいましたが、ポイントは擬似クラスと擬似要素を併用している「a:hover:before」の部分です。

Leave a Comment