自分のリストスタイルを正しく作るには？

Question

私はHTMLでリストを作ったが、代わりにデフォルトの弾丸の私はチェックマークで投票箱を望んでいたので、私はいくつかのCSSを追加しました：

ul { 
 
    list-style: none; 
 
} 
 
li::before { 
 
    content: "\2611"; 
 
}

<ul> 
 
    <li>Long text</li> 
 
    <li>Long text</li> 
 
    <li>Long long text</li> 
 
</ul>

、すべてがほぼ完璧ですが、とき<li>のテキストは少なくとも2行、2行目は空白で始まります。

簡単に言えば、新しい行の最初の文字は行頭文字の下にあるのではなく、前の行の最初の文字の下にあるべきです。

私はどのようにそれを行うには手がかりがありません。

Answer 1

liのテキストインデントとパディングを調整して、必要に応じてカスタムコンテンツを整列させることができます。

ul { list-style: none; } 
 

 
li { text-indent: -20px; margin: 10px 0;} 
 

 

 
li::before { content: "\2611"; color: #a00; padding-right: 5px; }

<ul> 
 
<li>Long text</li> 
 
<li>Long text</li> 
 
<li>Long long text Long long text Long long text Long long text Long long text Long long text </li> 
 
<li>Long text</li> 
 
<li>Long long text Long long text Long long text Long long text Long long text Long long text </li> 
 
<li>Long text</li> 
 
</ul>

Answer 2

カスタム画像をリストスタイルとして追加できます。スペーシングの問題も同様です。

ul { 
    list-style-image: url('customimage.gif'); 
} 

詳細については、hereをご覧ください。