あなたも？ 猫へようこそ。
問題を解決するための従来のアプローチは、デフォルトのブラウザブロックリストの番号付けをブロックし、代わりにハードコードされた番号を挿入するために要素の標準番号付け（li）を取り除くことです。 これにより、希望どおりに設計することができます。
これは視覚的に機能しますが、このリストの使用は、セマンティックの観点から完全に真実ではありません。 CSSを無効にしてこのような疑似番号付きリストを見ると、重複した番号付け、またはマーカーと番号付けが一緒に表示されます。 これは欠陥のようです。
そのため、最近番号付きリストの設計に再び直面したとき、番号付けを偽造せずに別のアプローチを試すことにしました。 Internet Explorerは最終的にCSSサポートの分野で他のブラウザーに追いつき、プログレッシブエンハンスメントの概念を使用するスペースを増やすという事実により、今回は問題に対する許容できる解決策を見つけることができます。 IE 7以下では、番号付きリストの設計が奪われるため、この手法が役立つ場合があります。
トリックは、 CSSによって生成されたコンテンツ（CSSによって生成されたコンテンツ）を使用して、標準のリストを削除した後、番号リストを作成して埋め込むことです。 始めるために、テクニックを使用する簡単な例として、番号付きの番号付きリストを設計しました。 注 ：CSSの例には、古いブラウザーのロールバックがなく、ネストされたリストは考慮されません。 時間があるとすぐに-私はそれを修正します。
サンプルCSSは次のとおりです。
ol { counter-reset:li; /* */ padding:0; /* */ list-style:none; /* */ } ol li { position:relative; /* */ margin:0 0 6px 2em; /* , */ padding:4px 8px; border-top:2px solid #666; background:#f6f6f6; } ol li:before { content:counter(li); /* */ counter-increment:li; /* 1 */ /* */ position:absolute; top:-2px; left:-2em; width:2em; padding:4px 0; border-top:2px solid #666; color:#fff; background:#666; font-weight:bold; font-family:"Helvetica Neue", Arial, sans-serif; text-align:center; }
（適切に強調表示されたコード： pastebin.com/JmKJCn0J ）
キーポイントは次のとおりです。
list-style：none：デフォルトのリスト番号を上書きします
カウンターリセットとカウンターインクリメント：番号スペースを作成し、カウンター値を増やします。 両方については、 CSS 2.1 12.4自動カウンターと番号付けで説明されています。
content：作成されたカウンターのインデックスを挿入します。 ここで説明します： CSS 2.1。12.2。 'Content'プロパティ
：before-擬似要素
これらのプロパティの詳細な説明については、リンクをたどってください。
生成された要素に任意の外観を適用できます。 しかし、リストが非常に長い場合に何が起こるかを忘れてはいけません-3桁または4桁の数字のための十分なスペースがありますか？ 非常に一般的なケースではありませんが、それでも数値要素の幅に注意してください。
既に述べたように、これはIE 7以前では機能しません。なぜなら、：beforeおよび：疑似要素はIE 8でのみサポートされていたためです。 、数字を作らずに。 ほとんどの人はこれを生き残ります。