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;
}
Notes:
- The bigger the level, the more distant the pseudo-element is.
- Level 1 corresponds to normal
:before
or:after
pseudo-elements.