CSS Guide: Numbered Table of Content

Return to CSS Repository

Ever wanted a numbered table of content like Wikipedia? Well, it is doable on world anvil, but it takes some slightly advanced CSS. Thankfully for you, I already wrote it! If you just want the code, click the spoiler below and copy paste into your own css. If you'd like me to break down how it works, read the guide.
I don't need to know how it works, just give me the code

.user-css div.articletoc {
 counter-reset: toc0;
}


.user-css .articletoc .article-toc-indent-0 {
 counter-reset: toc1;
}


.user-css div.articletoc .article-toc-indent-1 {
 counter-reset: toc2;
}


.user-css div.articletoc .article-toc-indent-2 {
 counter-reset: toc3;
}


.user-css .articletoc .article-toc-indent-0::before {
 counter-increment: toc0;
 content: counter(toc0) 
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png);
 margin-right: 10px;
}


.user-css .articletoc .article-toc-indent-1::before {
 counter-increment: toc1;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1);
 margin-right: 10px;
}


.user-css .articletoc .article-toc-indent-2::before {
 counter-increment: toc2;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc2);
 margin-right: 10px;
}


.user-css .articletoc .article-toc-indent-3::before {
 counter-increment: toc3;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc2)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc3);
 margin-right: 10px;
}

---

How to Create a Numbered Table

To create a numbered table of contents we need to use the pseudoelement ::before. Typically, css only styles what's already there, but with before and after we can add new stuff, like pictures or shapes! It's often used to add written labels like "info", but we can't use it to add text on world anvil. Content had to be slightly nerfed on world anvil to protect the site against harmful code injections.

Article Table of Contents

Counters

::before and ::after and content are still very powerful tools. Here, we use it to count for us. Counters need to be defined and set up before they can be used. In this example I named the counters toc0, toc1, toc2 and so on, reflecting the name of the article-toc-indent.
The property and value content: counter(toc0); tells the css to print the number equivalent to toc0 before the class. The property counter-increment tells the code increases that number each time it sees an element with the class .article-toc-indent-# that's under .user-css and inside of an .articletoc
You might also be curious why there's a link in here between some of the counters. That's because I can't add writing, but I can add images. So to get a period between the numbers in my article table of contents, I have to put in an image of a period. That's slightly janky, but, well, I'd rather we have to write slightly janky code than leave the site vulnerable.

Adding the counters

.user-css .articletoc .article-toc-indent-0::before {
 counter-increment: toc0;
 content: counter(toc0) 
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png);
 margin-right: 10px;
}


.user-css .articletoc .article-toc-indent-1::before {
 counter-increment: toc1;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1);
 margin-right: 10px;
}


.user-css .articletoc .article-toc-indent-2::before {
 counter-increment: toc2;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc2);
 margin-right: 10px;
}


.user-css .articletoc .article-toc-indent-3::before {
 counter-increment: toc3;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc2)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc3);
 margin-right: 10px;
}

Resetting the Counters

Code can't really intuit things like "oh, I should start this subheader count fresh now that we've got a new header". So we have to tell it, hey, each time you see a header, reset this and that counter. That's what the code to the side does. This is a big part of what makes the numbered article table of contents harder to create, because we need to reset them. Otherwise we'd get a weird structure like this:
1 First Header
1.1 First Subheading
2 Second Header
2.2 First Subheading

Setting up the counters for each tier

.user-css div.articletoc {
 counter-reset: toc0;
}


.user-css .articletoc .article-toc-indent-0 {
 counter-reset: toc1;
}


.user-css div.articletoc .article-toc-indent-1 {
 counter-reset: toc2;
}


.user-css div.articletoc .article-toc-indent-2 {
 counter-reset: toc3;
}

Return to CSS Repository