擬似クラスである「:hover」を使って、マウスオーバー時に「before/after」などの擬似要素を変化させたい場合は、擬似クラス、擬似要素の順番でCSSを記述します。
a:hover:before {
任意のCSSを記述
}
a:hover:after {
任意のCSSを記述
}
任意のCSSを記述
}
a:hover:after {
任意のCSSを記述
}
例えば、擬似要素（before）で「beforeです」という文字を表示させておいて、マウスオーバー時に「hoverしたbeforeです」というテキストに変える場合は次のように書きます。
See the Pen
hover+before/after by KUBO (@KUBOGEN)
on CodePen.
HTML
<a href=””></a>
<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です’;
}
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