用網頁呈現公告、食譜或合約常見有條列式的文章，常常需要為內容標號碼，如果是文章本文已含數字編號，日後要更動順序則會花時間檢查上下文編號是否一致按順序標好。若用瀏覽器本身解析 css 的能力以自動標記號碼，將不用擔心條目編號是否有按照順序。
例如我有一個用電磁爐煎冷凍雞塊食譜的內容：
1. 事前準備工作：
1.1. 擦乾不鏽鋼鍋內部、外部和底部。
1.2. 在不鏽鋼鍋內鋪好知名品牌的萬用料理紙。
1.3. 一台可以調整烹調溫度至少85度到160度的電磁爐、一雙筷子、一個木鍋鏟和一個盤子 。
1.4. 一包從冷凍庫拿出來尚未解凍的冷凍雞塊。
1.5. 不用準備沙拉油。
2.煮食過程：
2.1. 在鋪好萬用料理紙的不鏽鋼鍋裡面，放入想吃的雞塊數量。
2.2. 放不鏽鋼鍋到電磁爐上。
2.3. 不需預熱電磁爐，打開電磁爐，並且調整溫度到160度。
2.4. 每約30秒，就翻面一次鍋內所有的雞塊，持續約7分鐘。煮食期間不用鍋蓋蓋著。
2.5. 如果發現鍋內區域有加熱不均的情況（例如雞塊有的煎到焦掉，有的則仍是冷凍狀態），可以用筷子跟木鍋鏟夾起鍋內的料理紙，保持雞塊不碰到不鏽鋼鍋內壁和鍋內底部的方式，旋轉萬用料理紙讓每個雞塊輪流均勻受熱。
2.6. 煎到雞塊表皮酥且微硬，以及顏色呈金黃色，即可用筷子夾起放到盤子。
3. 結束：
3.1 吃之前拍食物照片，並且上傳社群網路。
3.2 享用美食。
3.3 清理煮食環境。
如果我要用 html 和 css ，在瀏覽器看到食譜內容的自動標號和層級安排，我可以使用以下內容：
<html>
<head>
<title> 我的無油煎雞塊食譜 </title>
<link type="text/css" rel="stylesheet" href="/css/myother.css">
<style>
ol { counter-reset: item ;}
li{ display: block ;}
li:before {
content: counters(item, "-") ". "; counter-increment: item
} /* 這行會讓第二層級顯示 1-1., 1-2., 2-1., 2-2. ; 第三層級顯示 1-1-1., 1-1-2., 1-2-1., 1-2-2., 2-1-1., 2-1-2. ; 如果要改成 1.1.1., 1.1.2., 1.2.1., 1.2.2., 2.1.1., 2.1.2. 這種格式，只需改變 counters(item, "-") 成 counters(item, ".") */
ol li{ counter-increment: initial;} /* 這行是處理若 myother.css 也有對 ol 、 li 和 li:before 做其他操作，導致本頁 css 的 counters() 算 item 數值算錯之情況，強制counter 增幅用初始值，值是 none */
</sytle>
</head>
<body>
<ol>
<li>事前準備工作：
<ol>
<li>擦乾不鏽鋼鍋內部、外部和底部。</li>
<li>在不鏽鋼鍋內鋪好知名品牌的萬用料理紙。</li>
<li>一台可以調整烹調溫度至少85度到160度的電磁爐、一雙筷子、一個木鍋鏟和一個盤子 。</li>
<li>一包從冷凍庫拿出來尚未解凍的冷凍雞塊。</li>
<li> 不用準備沙拉油。</li>
</ol>
</li>
<li>
煮食過程：
<ol>
<li>在鋪好萬用料理紙的不鏽鋼鍋裡面，放入想吃的雞塊數量。</li>
<li>放不鏽鋼鍋到電磁爐上。</li>
<li>不需預熱電磁爐，打開電磁爐，並且調整溫度到160度。</li>
<li>每約30秒，就翻面一次鍋內所有的雞塊，持續約7分鐘。煮食期間不用鍋蓋蓋著。</li>
<li>如果發現鍋內區域有加熱不均的情況（例如雞塊有的煎到焦掉，有的則仍是冷凍狀態），可以用筷子跟木鍋鏟夾起鍋內的料理紙，保持雞塊不碰到不鏽鋼鍋內壁和鍋內底部的方式，旋轉萬用料理紙讓每個雞塊輪流均勻受熱。</li>
<li>煎到雞塊表皮酥且微硬，以及顏色呈金黃色，即可用筷子夾起放到盤子。</li>
</ol>
</li>
<li>
結束：
<ol>
<li>吃之前拍食物照片，並且上傳社群網路。</li>
<li>享用美食。 </li>
<li>清理煮食環境。</li>
</ol>
</li>
</ol>
</body>
</html>