問題
31疑似要素afterでアイコンを設置しよう
疑似要素「::after」を使ってテキストの文末にアイコンを設置します。 ひとつ前の問題を通して疑似要素の使い方を理解できていれば、難無くクリアできる問題だと思います!
HTML_CSSの問題に挑戦しよう！
問題
「疑似要素afterでアイコンを設置しよう」
afterを使って文字の末尾にアイコンを設置しよう。
アイコン画像はこちらを使って下さい。
『 https://ninjacode.work/assets/img/shuriken.png 』
幅と高さはwidth:12px;height:12px;に指定してください。
見本画像を参考にしてCSSに記述していきましょう。
あらかじめエディタに書くコード
<span style="font-size: 12px;">文字の後にアイコンを入れましょう</span>
¥HTML¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
アイコンを文字と連結させる為にはdisplay: inline-block;が必須です。
また、文字との間隔を開けるにはmarginを使用します。
縦軸がずれる場合はvertical-alignで調整しましょう。
補足
beforeやafterを使う際は、どちらもdisplayプロパティの設定を行ないました。
displayの値として指定できるinline-blockについて簡単に解説しておきます。
inline-blockとは、ブロックレベル要素とインライン要素の中間の要素にあたります。
インラインブロック要素は「要素は横並びにしたいけど、横幅・高さや余白を調整したい」などの場面で活躍します。
インラインブロック要素の特徴は、以下の4つが挙げられます。
・横に要素が並ぶ(インライン要素の特徴)
・幅と高さが指定できる(ブロックレベル要素の特徴)
・余白を調整できる(ブロックレベル要素の特徴)
・要素の配置を指定できる(インライン要素の特徴)
このような特徴から利便性が高く、Web制作現場でもよく利用されているので覚えておきましょう!
