ダッシュ リスト マーカーを使用した HTML リストのスタイル設定
HTML では、デフォルトの list-style-type は「disc」で、箇条書きをレンダリングします。 。代わりにダッシュ マーカーを含むリストを作成するには、CSS を使用できます。
1 つの解決策は、text-indent プロパティを使用してリスト項目と コンテンツ をインデントすることです。 :before 疑似要素のプロパティを使用して、ダッシュ文字を挿入します。
例:
<code class="css">ul { margin: 0; } ul.dashed { list-style-type: none; } ul.dashed > li { text-indent: -5px; } ul.dashed > li:before { content: "-"; text-indent: -5px; }</code>
HTML:
<code class="html"><ul class="dashed"> <li>First</li> <li>Second</li> <li>Third</li> </ul></code>
結果:
- First - Second - Third
このアプローチにより、ダッシュ マーカーを追加しながらインデントされたリスト効果を維持できます。
汎用リスト マーカー:
:before 疑似要素の content プロパティを次のように設定することで、任意の Unicode 文字をリスト マーカーとして使用できます。目的の文字の HTML エンティティ コード。たとえば、アスタリスク (*) を使用するには、
<code class="css">ul > li:before { content: "*"; }</code>
以上がCSS を使用してダッシュ リスト マーカーを使用して HTML リストのスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。