HTML Dog
Skip to navigation

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

ValueDescriptionExample
[string]Text."BLOB!"
[URL]Resource, most commonly an image.url("blob.png")
open-quoteContent defined by the quotes property. Commonly a standard open quotation mark.
close-quoteContent defined by the quotes property. Commonly a standard close quotation mark.
no-open-quoteNo generated content but maintains the level of nesting for quotes.
no-close-quoteNo 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"
normalEquivalent of none. Default.
noneNo 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) ")";
}

Browser support