コーディング超初歩的つまずきポイント②：input要素と:after擬似要素

こんにちは。アシスタントエンジニアのTakayamaです。

先日、
CMSのプラグインによって生成されたボタンに対し、after擬似要素を使って
マウスオンで色が変わるアニメーションを付けようとしても上手くいかない、
ということがありました。

CMSのプラグインで生成されたボタンはinput要素で出来ていたりしますが、
input要素には擬似要素が使えません。

今回はその時どうやってスタイルをつけたかについて書いてみました。

divで囲もう

まずはボタンっぽい四角を作ります。

さて、ここでinput要素にafter擬似要素を効かせられれば簡単なのですが、先述の通りinput要素には擬似要素がつけられません。
なのでdivで囲い、そのdivに対して擬似要素をつけます。

そしてマウスオン時にそいつがしゅっと現れるように:hover擬似クラスも設定します。

HTML

CSS

そしてマウスオンすると...。

しゅっ

真っ黒。
アニメーションの変化はいい感じですがinput要素まで隠れてしまいました。

z-indexを指定しよう

擬似要素が上に被さって隠れてしまうなら、それよりも上になるようz-indexプロパティで重なり順を変えてしまいましょう。
ただ、もちろんそうすると今度は擬似要素がinput要素に隠れてしまうので画面上は変化がありません。input要素の背景が透けていれば良いのですが、opacityの指定では文字まで透けてしまいます。

なのでbackground-colorの値を透明にしてしまいます。
rgbではなくrgbaで不透明度を設定すれば解決です。

＊ちなみに

そうして背景だけ透明にすれば...。

しゅっ

完成です！

＊重なり順
1. 白い文字...input要素
2. 黒い四角...after擬似要素
3. 緑の四角...div

最終的にこんなコードになりました

HTML

CSS

button要素で代替したコードも併記しました。ほぼ同様の記述で実装できます。
ここまでボタンがinput要素という前提で進めてきましたが、そもそもbutton要素で代替して問題無ければこちらの方が自由度が高いですね。このコードではFont Awesomeのアイコンも使ってみました。

しゅっ

button要素を使った方のコードはこんな結果になります。