CSS Property: content
Generated content, placed before or after the content of a box.
Used in conjunction with the ::before
and ::after
pseudo-element selectors.
Possible Values
Value | Description | Example |
---|---|---|
[string] | Text. | "BLOB!" |
[URL] | Resource, most commonly an image. | url("blob.png") |
open-quote | Content defined by the quotes property. Commonly a standard open quotation mark. | |
close-quote | Content defined by the quotes property. Commonly a standard close quotation mark. | |
no-open-quote | No generated content but maintains the level of nesting for quotes. | |
no-close-quote | No generated content but maintains the level of nesting for quotes. | |
attr( [name]) | The value of the given HTML element attribute. [name] should be a string that matches an attribute name. | attr(class) |
counter( [name]) | The value of a counter [name] (a string), as established by the counter-increment property. | counter(countername) |
counter( [name], [style]) | The value of a counter [name] (a string), as established by the counter-increment property, with a [style], which is the equivalent of the value of the list-style-type property. | counter(countername, lower-roman) |
counters( [name], [string], [style]) | The values of all counters called [name] (a string), separated by [string] (also a string — surprise!). The optional [style] is a value equivalent to that of the list-style-type property. | counters(countername, " - ", lower-roman) |
[combination] | Any combination of the preceding values can be applied, separated by spaces. | "This" url("plus.jpg") "that" |
normal | Equivalent of none . Default. | |
none | No generated content. | |
inherit | ||
initial | ||
unset |
Example
li::before {
content: "+";
}
blockquote p::before {
content: open-quote;
font-size: 4em;
vertical-align: middle;
}
blockquote p::after {
content: close-quote;
font-size: 2em;
vertical-align: middle;
}
.blob {
counter-increment: blobnum;
}
.blob::before {
content: "Blob #" counter(blobnum) ": " url("blob.jpg");
}
a:link::after {
content: " (" attr(href) ")";
}