From 06722a24e13de60ccb4546e3a54f0d5c6b2ba903 Mon Sep 17 00:00:00 2001 From: sagar2901 Date: Tue, 30 Sep 2025 00:03:59 -0400 Subject: [PATCH] #41290 CSS: Fix sibling-index() example to use counters with content --- files/en-us/web/css/sibling-index/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/sibling-index/index.md b/files/en-us/web/css/sibling-index/index.md index ffd8d24cd27a9b4..9ce9ed1a5ed349e 100644 --- a/files/en-us/web/css/sibling-index/index.md +++ b/files/en-us/web/css/sibling-index/index.md @@ -134,7 +134,7 @@ We include a {{htmlelement("nav")}} container and several children {{htmlelement #### CSS -We make it visually appear as a numbered list by displaying the sibling-index before each {{htmlelement("div")}} element using the {{CSSxRef("::before")}} pseudo-element, setting the {{CSSxRef("content")}} to be the integer returned by the `sibling-index()` function. +We make it visually appear as a numbered list by displaying the list index in ::before. Since content expects a string, we set a CSS counter to the numeric `sibling-index()` function and output it with `counter()` function. ```css div { @@ -144,7 +144,8 @@ div { } div::before { - content: var(--list-index); + counter-set: ordered var(--list-index); + content: counter(ordered); } ```