HTMLとCSSの順序付きリストからピリオドを削除するにはどうすればよいですか?

HTML と CSS での順序付きリストのカスタマイズ

順序付きリストは、情報を順番に表示するための貴重なツールです。ただし、デフォルトのスタイルでは各数値の後にピリオドが含まれることが多く、これは必ずしも望ましいとは限りません。この記事では、順序付きリストをカスタマイズし、ピリオド区切り文字を削除する方法について説明します。

ピリオドのない順序付きリストの作成

従来、順序付きリストからピリオドを削除するには、 list-style-image プロパティを使用して、数値ごとにカスタム クラスを作成します。ただし、エレガントでセマンティックな CSS のみのソリューションが存在します。

<code class="css">ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}</code>

このソリューションは、CSS カウンターと :before 擬似要素を使用してカスタム番号付けを生成します。 list-style-type プロパティは none に設定され、デフォルトの箇条書きまたは番号が削除されます。 counter-reset プロパティにより、カウンターが 1 から開始されることが保証されます。

ブラウザの互換性

このソリューションは :before 擬似セレクターに依存していることに注意することが重要です。 IE6 および IE7 ではサポートされていません。これらのブラウザの場合、追加の CSS ルールを追加できます:

<code class="css">ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}</code>

このルールはカスタム スタイルをオーバーライドし、IE6 および IE7 でデフォルトの番号付きリストが表示されるようにします。

以上がHTMLとCSSの順序付きリストからピリオドを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。