HTML リストの箇条書きをダッシュ​​記号に置き換える方法

ダッシュ記号を使用した HTML のリスト スタイルのカスタマイズ

HTML では、デフォルトのリスト スタイルは円盤または正方形として表示されますが、ダッシュ記号を使用して箇条書きをカスタマイズしたい場合があります。これを実現するには、CSS を利用してリストの外観を変更します。

:before 擬似クラスを使用する

1 つの方法では、:before 擬似クラスを使用して、各リスト項目の前にダッシュを付けます。この手法を使用すると、ダッシュを追加しながら標準のリストのインデントを維持できます。ただし、このアプローチでは、CSS サポートの違いにより、ブラウザーごとに潜在的な互換性の問題が発生する可能性があります。

list-style-type と text-indent を組み合わせる

より信頼性の高い解決策は、 list-style-type: none を使用してデフォルトの箇条書きを削除し、 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">Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text</code>

これにより、ダッシュを箇条書きとして使用したカスタマイズされたリストが作成されます。リストのインデント:

• First
• Second
• Third

• First

  • Second
  • 3 番目

このメソッドはブラウザ間互換性があり、デフォルトのリスト スタイルをカスタマイズされたダッシュに効果的に置き換えます。

以上がHTML リストの箇条書きをダッシュ​​記号に置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。