Search within TutorialsPark

CSS content Property

To add generated content to elements

Definition and Notes.

1. The CSS content property enables you to add content to elements other than list items, using the pseudo elements

::before and ::after

2.By default, the content is likely to be inline content, but the type of box the content creates can be defined using the property display


CSS content property. internetexplorer safari firefox opera chrome

View in Splitscreen»


Note-::before generates content before the element and ::after generates content after the element. .

Property Values

Value Description
none The pseudo element is not generated
normal Same as normal
counter A function that generates a numbered sequence
attr(attribute) Use the value of the attribute in the selected elements
string Literal text that is to be inserted
open-quote Insert an opening quote as defined by quotes property.
close-quote Insert a closing quote as defined by the quotes property
no-open-quote Omit the opening quote, but move to the next level of nesting
no-close-quote Omit the closing quote, but move up to the previous level
url(URL) To denote an external resource, usually aan image
inherit To set the aspect value using a number


Specs Value
Name content
Value normal | none | [<string> | <uri> | <counter> | attr() |open-quote | close-quote | no-open-quote | no-close-quote]+
Initial Value normal
Applies to :before and :after pseudo-elements
Javascript syntax" Sir "
Inherited no
Computed Value For <uri> values, an absolute URI; for attribute references, the resulting string; otherwise, same as declared value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.