CSS Generated Content allows us to insert and move content around a document. We can use this to create footnotes, endnotes, and section notes, as well as counters and strings, which can be used for running headers and footers, section numbering, and lists.
CSS Generated content, automatic numbering, and lists
CSS Generated Content allows us to insert and move content around a document. We can use this to create footnotes, endnotes, and section notes, as well as counters and strings, which can be used for running headers and footers, section numbering, and lists.
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The content property, in conjunction with these pseudo-elements, specifies what is inserted.
For example, the following rule inserts the string "Note: " before the content of every P element whose "class" attribute has the value "note":
p.note:before {
content: "Note: ";
}
Examples
/* Keywords that cannot be combined with other values */
content: normal;
content: none;
/* <url> value */
content: url("http://www.example.com/test.png");
/* <image> value */
content: linear-gradient(#e66465, #9198e5);
/* values below can only be applied to generated content using ::before and ::after */
/* <string> value */
content: "prefix";
/* <counter> values */
content: counter(chapter_counter);
content: counters(section_counter, ".");
/* attr() value linked to the HTML attribute value */
content: attr(value string);
/* Language- and position-dependent keywords */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
/* Except for normal and none, several values
can be used simultaneously */
content: open-quote chapter_counter;
/* Global values */
content: inherit;
content: initial;
content: unset;
CSS
img:before {
content: "hello";
}
jsFiddle.
This does not produce the…
