HTML と CSS でピリオドのない順序付きリストを作成する方法

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

多くの開発者は、各項目の後に従来のピリオドや数字文字を使用せずに順序付きリストを作成する方法を模索しています。以前は不可能だと考えられていましたが、HTML と CSS は list-style-type と pseudo-selector を適切に実装することで解決策を提供できるようになりました。

CSS Solution

Toピリオドを削除するには、次の 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;
}

「list-style-type」を「none」に設定すると、デフォルトの箇条書き文字または数字文字が削除されます。 'counter-increment' は、リスト項目ごとにカウンターを作成し、':before' 疑似セレクターに表示します。 「content」プロパティは、カウンター値をリスト項目のコンテンツとして設定します。 「width」プロパティを調整して数値の幅を制御できます。

古いブラウザのフォールバック

Internet Explorer 6 および 7 ブラウザの場合は、次の CSS を追加して復元します。デフォルトのリストスタイル:

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

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