【CSS】マウスオーバーした時に、テキストだけで表示切替する方法【Gナビなどで使用】

テキストのみで切り替える方法の備忘録です。

【１】ダイナミック疑似クラス:after (:before)を使用する方法

ex) aタグに使用する

・html

<a href=””></a>

でテキストを入れないようにします。

・css

a:after {

content:”切り替え前”;

}

a:hover:after{

content:”切り替え後”;

}

以上の設定で切り替えができます。

他の方法はまだ知らないので、覚え次第追記していきます。