afterを使ってアイコンを設置しよう

問題

afterを使って文字の末尾にアイコンを設置しよう。
アイコン画像はこちらを使って下さい。
『 https://ninjacode.work/assets/img/shuriken.png 』

幅と高さはwidth:12px;height:12px;に指定してください。
見本画像を参考にしてCSSに記述していきましょう。

自分の環境に書くコード

              <span style="font-size: 12px;">文字の後にアイコンを入れましょう</span>
¥HTML¥

期待する画面

解答ソースコード

              <span style="font-size: 12px;">文字の後にアイコンを入れましょう</span>
¥HTML¥

              span::after {
    content: ";
    display: inline-block;
    background-image: url(https://ninjacode.work//assets/img/shuriken.png);
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 4px;
    vertical-align: -1px;
}
¥CSS¥

解説

初級参拾の問題とほぼ解答は一緒ですが、
アイコンを文字と連結させる為にはdisplay: inline-block;が必須です。

また、文字との間隔を開けるにはmarginを使用します。
縦軸がずれる場合はvertical-alignで調整しましょう。

ログインして解答を見る

beforeやafterを使う際は、どちらもdisplayプロパティの設定を行ないました。
displayの値として指定できるinline-blockについて簡単に解説しておきます。
inline-blockとは、ブロックレベル要素とインライン要素の中間の要素にあたります。
インラインブロック要素は「要素は横並びにしたいけど、横幅・高さや余白を調整したい」などの場面で活躍します。

インラインブロック要素の特徴は、以下の4つが挙げられます。
・横に要素が並ぶ(インライン要素の特徴)
・幅と高さが指定できる(ブロックレベル要素の特徴)
・余白を調整できる(ブロックレベル要素の特徴)
・要素の配置を指定できる(インライン要素の特徴)
このような特徴から利便性が高く、Web制作現場でもよく利用されているので覚えておきましょう!