Q&A
スイマセン！コピペミスしてました！ただいま修正いたしました。
前提・実現したいこと
リストの前に背景画像としてアイコン差し込む
練習で組み込んでいるのですがうまくいくケースとうまくいかないケースがありググったりしてましたが原因がわからないので
なぜ見えないのか教えていただけると助かります。
本来のコードはもっと複雑だったのですがシンプルにしても同様の結果（失敗）に終わるのでシンプルにしたコードを載せておきます。
発生している問題・エラーメッセージ
表示がされないです。
エラーメッセージ
特になし
該当のソースコード
HTML
1<!doctype html> 2<head> 3<meta charset="UTF-8"> 4<link rel="stylesheet" href="stylecss.css"> 5</head> 6<html> 7<body> 8 9 <ul> 10 <li>みかん</li> 11 <li>りんご</li> 12 <li>オレンジ</li> 13 <li>アップル<li> 14 15 </ul> 16 17</body> 18</html>
css
1*{ 2 padding: 0; 3 margin: 0; 4} 5 6ul li{ 7 color: red; 8 list-style: none; 9 padding-left: 30px; 10 margin-left: 30px; 11} 12 13 ul li::before{ 14 content:""; 15 background-image: url(images/check-icon17x17.png); 16 height: 17px; 17 width: 17px; 18}
試したこと
最初はパディングレフトとマージンレフトがない状態で『あれ？表示されない？』に陥っていました。
ただフレックスボックスで横向きにしたりしてたら出たりしたので::beforeの疑似要素で空要素を差し込んで表示させようとしていますがそのスペースがないのではないかと考えました。
通常の縦書きのリストの状態に戻し、（上記に書いているコードのことです）
padding-left: 30px;
margin-left: 30px;
（どちらがいるかわからないのでとりあえず両方でスペースの確保）を追加しこれで表示されるはずと思ったのですが表示されませんでした。
ちなみに差し込んでいる画像は、縦横ともに17pxの拾ってきたアイコンです。
補足情報（FW/ツールのバージョンなど）
ファイル構成
}
ここにより詳細な情報を記載してください。
差し込む背景画のスペースがないから表示されないとばかり思っていたのですがコードそのものがおかしいのでしょうか？
list-style-imageでも差し込めるような気がするのですが、今は疑似要素のことを勉強しているのでこのパターンでのアドバイスを頂けると助かります。
回答2件
0
ベストアンサー
CSS
1ul li::before { 2 display: inline-block; 3 (以下略) 4}
投稿2020/09/27 15:46
総合スコア11990
0
ul li{が閉じられていません。
}を記載して、閉じてください。
投稿2020/09/27 15:32
総合スコア9555
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/27 15:52