問題
30疑似要素のbeforeで画像を表示しよう
疑似要素の「::before」を使ってブラウザ上に画像を表示します。 beforeで画像を表示させるには、CSSのみで画像を指定することになります。 どのように指定するのかこの問題を通して学習していきましょう!
HTML_CSSの問題に挑戦しよう！
問題
「疑似要素のbeforeで画像を表示しよう」
beforeを使用して画像を表示してください。
画像は『 https://ninjacode.work/assets/img/kv.png 』こちらを使い、
width:250px;
height:140px;
に指定してください。
見本画像を参考にしてCSSに記述していきましょう。
あらかじめエディタに書くコード
<span style="display: inline-block;background-color: black;"></span>
¥HTML¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
beforeやafterで画像を表出する際は
background-imageで画像を指定します。
オプションとして、background-repeatでリピートの設定、
background-sizeでは画像の大きさの設定などがあります。
また、beforeやafterで画像を設定する際は
displayをblockまたはinline-blockで指定する必要があります。
contentは、空で付与する事が必須です。
覚えておきましょう。
補足
ここでは疑似要素と疑似クラスの違いを再確認しておきます。
・疑似要素
疑似要素は、HTMLには一切変更を加えることなく、ある要素の内容を変更したり追加することのできるものです。
::beforeや::afterを使って、選択した要素の先頭または文末に文章を追加したり、::first-lineや::first-letterを使って文章の1行目や1文字目の文字色やサイズを変化することなどができます。
・疑似クラス
疑似クラスは、マウスホバー時などの文書構造の範囲外にある情報やpタグの奇数だけにスタイルを指定するなどの単体セレクタでは表現できないものを選択する為に使用されます。
疑似要素は、要素の一部に対して影響を与えることができるのに対し、疑似クラスは指定した要素全体に対して影響を与えることができます。
