Table of Content with Page Number Using CSS pseudo-element

Image: Table of Content with Page Number Using CSS pseudo-element GIF

In this snippet by Matthieu Bué we see how we can add page numbers to a table of content using pseudo-elements. The styling is applied to an unordered list to make it look like a table of content. This will be great for sites where you want to break up the really long content to smaller chunks, online version of a book or a course, etc.

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen Summary with pseudo-element by Twikito (@Twikito) on CodePen.0

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.