忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
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¥
          
答えのアイコン

解説

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

また、文字との間隔を開けるにはmarginを使用します。
縦軸がずれる場合はvertical-alignで調整しましょう。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET