CSS擬似要素「before/after」の背景画像表示で鬼ハマリしたので備忘録メモ

cssの擬似要素 before/after に画像を表示させる方法をメモしておきます。

擬似要素に画像を表示させるcssコード

.hoge:before {
    content: "";
    display: inline-block;
    background: url(xxx.png);
    background-size: cover;
    width: 50px;
    height: 50px;
    position: absolute;
    left: -45px;
}

とりあえずこれが答え。どの技術情報サイトもだいたいこんな感じのがのせられています。解説というわけでもないですが、このコード結構はまりポイントがいっぱいあるので、次見出しからこのコードのポイントなど解説していきたいと思います。

contentプロパティとbackgroundプロパティ

擬似要素に画像を表示させるcssの最大の罠がこのcontentプロパティとbackgroundプロパティです。backgroundプロパティだけで画像が表示されるかとおもいきや、擬似要素にbackground、つまりは背景画像を設定する場合は、contentプロパティを設定しないと画像は表示されません。

実をいうと、contentプロパティのみでも画像は表示できるのですが、それだと画像のサイズが調整できないので、結局のところbackgroundプロパティを使用するケースが多いのではないかと思います。このあたりは後述します

diplay: inline-block;

画像はhtmlのinline要素だということをすっかり忘れていました。display: inline-block;にするとinline要素なんだけどもblock要素の性質をもつようになります。←こういうよくわからない解説はおいといて、結局のところinline-blockにしないとwidthやheightが調整できないのでかならず設定する必要があるのです。

background-size: cover;

background-size: cover;は、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小するものです。←ただこうかくと非常にわかりづらくなります。簡単に書くと画像の全体表示をするものです。

こちらのbackground-sizeプロパティの設定は任意になるかと思います。

position: absolute;

背景画像の位置合わせを行いたい場合は、親要素にposition: relative;を設定した上で該当擬似要素にposition: absolute;を設定します。こうすることでtop、right、bottom、leftプロパティで位置を調整できるようになります。

画像サイズを変えなくていいからとりあえず擬似要素に画像を表示したい。

css擬似要素の画像表示でサイズを変える必要がない場合のコードは以下になります。

.hoge:before{
   content: url(xxx.png);
}

この場合はソース画像のサイズのまま画像が表示されます。位置合わせを行う場合は上記のとおりに親にposition: relative;を設定して、該当擬似要素にはposition: absolute;を設定します。

まとめ

ぶっちゃけinline-block忘れはタコミスですが、css擬似要素の画像サイズを変えるのなら「contentを空にしたうえでbackgroundプロパティを使う」というやり方を知らないと、へんなところでハマってしまいます。忘れてもいいようにここにメモを残しておきました。