HTML/CSS でピリオドのない順序付きリストを作成するにはどうすればよいですか?

HTML/CSS でピリオドを使用しない順序付きリストを作成する

順序付きリストは通常​​、リスト番号の後にピリオドを付けて表示されます。ただし、これらのピリオドを削除して外観をカスタマイズする必要がある場合はどうすればよいでしょうか?ここでは、利用可能な HTML および CSS ソリューションを詳しく説明します。

ユーザーが述べたように、CSS はカスタム スタイルを通じてこれを実現する手段を提供します。変更する主な CSS プロパティは次のとおりです。

• list-style-type: デフォルトのピリオドを削除し、新しいタイプを適用します。
• counter-increment および counter-reset: を作成します。リスト番号を生成するカスタム カウンタ。
• 内容: 疑似要素内で生成されたカウンタを使用するには。

次の 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 プロパティを組み合わせることで、ピリオドなしで数値を表示する順序付きリストを作成できます。さらに、カウンタのインクリメント:customlistcounter;

ただし、IE6 や IE7 などの一部の古いブラウザでは、:before 疑似セレクターがサポートされていないことに注意してください。互換性を確保するには、これらのブラウザをターゲットにし、ネイティブのリスト スタイルの外観を使用する追加の CSS ルールを追加することを検討してください:

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

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