Googleでログイン
Twitterでログイン
問題
afterを使って文字の末尾にアイコンを設置しよう。
アイコン画像は『 https://ninjacode.work/assets/img/shuriken.png 』
こちらを使って
width:12px;height:12px;に指定してください。
見本画像を参考にしてCSSに記述し実装してください。
アイコン画像は『 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¥
1.HTMLの宣言をしてみよう
解説
アイコンを文字と連結させる為にはdisplay: inline-block;が必須です。
また、文字との間隔を開けるにはmarginを使用します。
縦軸がずれる場合はvertical-alignで調整しましょう。