要素::before(::after)のcontentで画像を表示する

例えば「h1::after { content: ”; }」を使って、h1タイトルの後に画像を表示させたい場合。

h1::after {
           content: '../images/abc.png';
           width: 30px;
           height: 30px;
}

ってやれば、「h1タイトル+30pxに縮小されたabc画像」になるはず…

って、ダメなんかい!!

で、こういう時は教えてもらうしかない。

★CSSのcontentで画像を指定する

=方法1=

h1::after {
    content: url(../img/arrow.png);
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

transformプロパティを使うのは、contentで追加した画像にはサイズを指定することができないため。

なるほど。だから上のように画像が小さくならなかったんだ。

で今回は、背景として画像を指定したかったので次の方法でやりました。

=方法2=

h1::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background: url(../img/arrow.png);
    background-size: 30px 30px;
}

ポイントは、background-sizeを指定することかなぁ。

思っていた通りに表示されました。