箇条書きcssのul liで一部のliにだけ項目の左側に画像をつけたい

<ul>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
</ul>

このリスト02と04の冒頭（項目の左）に画像を付けて表示したいのですが、htmlとcssはどのように書いたらいいでしょうか。

このようなイメージです。

　リスト01
☆リスト02
　リスト03
☆リスト04

下記のようにしてみたのですが、画像が表示されませんでした。

<ul>
<li>リスト01</li>
<li class="starmark">リスト02</li>
<li>リスト03</li>
<li class="starmark">リスト04</li>
</ul>


li .starmark{
list-style-type:none;
background: url(./images/starmark.png) no-repeat left center;
padding-left: 35px;
}

No.2 ベストアンサー 回答者： wanderer1 回答日時： 2020/08/01 00:51

li と .starmark の間に半角スペース入ってませんか？

一度スペースをとってみてください。

この回答へのお礼

ありがとうございます。できました！

お礼日時：2020/08/01 03:45

No.1 回答者： naokita 回答日時： 2020/08/01 00:25

それで良いです。

一般的です（他の方法もありますが）

で、おそらくですが、
画像ファイルのパスが違うのでしょう・・・（初心者さんには良くある事です）

li 以外での、background: url(～～～)と同じパスや配置にしましょう！
または、
別の画像を表示してみましょう。

li .starmark{
list-style-type:none;
background: url(https://oshiete.goo.ne.jp/favicon.ico) no-repeat left center;
padding-left: 35px;
}
例えば、これなら表示されるでしょ？


-----------
ディレクトリは？
　/HTMLファイル
　/CSSファイル
　/images/（この中にstarmark.png）
という構造/配置なっているパターンが多いので、
background: url(images/starmark.png) no-repeat left center;
とか、
background: url(../images/starmark.png) no-repeat left center;
とかに変更してみるとか、
そもそも、画像を置いたディレクトリ（フォルダ）が違う可能性も多々ある・・・

この回答へのお礼

ありがとうございました！

お礼日時：2020/08/01 03:45