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

HTML および CSS の順序付きリスト: ピリオドの削除

CSS を使用すると、数値の後にピリオドを付けない順序付きリストを作成できます。実現不可能だと思われるかもしれませんが、これを実現する方法を見てみましょう。

ピリオドを削除するには、次のようにリストのスタイルを設定します。

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

カスタム数値を作成するには、次のコードを使用します。コード:

<code class="css">ol.custom > li {
  counter-increment: customlistcounter;
}

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

これにより、各リスト項目の前にカスタム番号が表示されます。

このソリューションは :before 擬似セレクターに依存していることに注意してください。これは、次のような古いブラウザーでは機能しない可能性があります。 IE6とIE7。これに対処するには、これらのブラウザを特にターゲットとする追加の CSS ルールを使用します:

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

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