Using the :before(n) and :after(n) CSS Pseudo-Elements

Although not standard, this extension may be useful if you want to style sections by adding multiple levels of static content. To add static content to an element, you would normally use a :before or :after pseudo-element.

This example adds static text before the title ("Chapter 1", "Chapter 2", etc.):

h1:before {
  content: "Chapter " counter(chapter) ".";
  color: blue;
}

All of this is styled with the same color (blue in this example). Using standard CSS, it is impossible to style specific aspects of it (for example, just the chapter number with a larger font and with red). However, you can do it using multiple before(n) or after(n) pseudo-elements:

h1:before(3) {
  content: "Chapter ";
  color: blue;
}
h1:before(2) {
  content: counter(chapter);
  color: red;
  font-size: large;
}
h1:before(1) {
  content: ".";
  color: blue;
}