HTML でダッシュ スタイルのリストを作成する方法: デフォルトの箇条書きスタイルを超えて?

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

HTML では、list-style-type プロパティを使用してリスト項目の箇条書きスタイルを指定します。ただし、箇条書き文字としてのダッシュはネイティブにサポートされていません。

:before 擬似クラスの使用

ダッシュ スタイルのリストを作成する 1 つの方法は、:before 擬似クラスを使用することです。これにより、各リスト項目の前にコンテンツを挿入し、個別にスタイル設定することができます。

<code class="css">ul.dashed {
  list-style-type: none;
}
ul.dashed > li::before {
  content: "-";
  margin-right: 5px;
}</code>

content プロパティは、各 li の前にダッシュ「-」を挿入し、margin-right はダッシュとリストの間にスペースを提供します。 item text.

text-indent の利用

:before 疑似クラスの使用中にインデントされたリスト効果を維持するには、リスト項目に負の text-indent を適用できます。

<code class="css">ul.dashed > li {
  text-indent: -5px;
}</code>

これにより、箇条書きスタイルによって作成されるデフォルトのインデントが無効になり、ダッシュがリスト項目テキストの先頭に揃えられます。

汎用リスト文字のカスタマイズ

汎用文字をリストとして使用するには

<code class="css">ul.generic {
  list-style-type: disc;
}

ul.square {
  list-style-type: square;
}

ul.circle {
  list-style-type: circle;
}</code>

これにより、さまざまな箇条書きの形でリストを作成し、必要に応じてリストの外観をカスタマイズできます。

以上がHTML でダッシュ スタイルのリストを作成する方法: デフォルトの箇条書きスタイルを超えて?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。