In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > content

content property

Browser support:

8

Specifies the generated content after or before the element.

Use it with the ::before and ::after pseudo elements and the counter-increment and the counter-reset style properties to create automatic numbering. This property is useful if you want to generate the numbering with names like the header numbering mechanism in Microsoft Word.

Note: The content property is supported in Internet Explorer from version 8.

JavaScript page for this property: content. You can find other example(s) there.

Possible values:

One of the following values:

•

Any of the following values (use the space character to separate them, each value can be used arbitrary times):

•	text content
•	attr(name)
•	counter(name, style)
•	url(URI)
•	open-quote
•	close-quote
•	no-open-quote
•	no-close-quote

•

none

•

normal

•

inherit

Description of values:

url(URI)

Where URI specifies the location of an external resource file.

attr(name)

The attr method returns the value of the specified attribute (name) as a string.

close-quote

Refers to the second of a pair of quotes.

counter(name, style)

The counter method returns a string from the counter value specified by the name parameter. The format of the generated string depends on the style parameter. For possible values, visit these links: list-style-type (W3C), list-style-type (MSDN) If the style parameter is not defined, 'decimal' is used.

inherit

Takes the value of this property from the computed style of the parent element.

no-close-quote

Decrements the quotation depth, but does not insert a quotation mark.

no-open-quote

Inserts nothing, but increments the quotation depth by one.

none

The pseudo-element is not generated.

normal

The pseudo-element is not generated.

open-quote

Refers to the first of a pair of quotes.

text content

String, text content to generate.

Default: normal.

Example HTML code 1:

This example illustrates the use of the content property:

<head>
    <style>
        body {
            counter-reset: chapter;      /* set chapter counter to 0*/
        }
        .chapter:before {
            content: counter(chapter) ". ";
            display: inline;
        }
        .chapter {
            counter-increment: chapter;
            /* increment chapter counter by 1, same as counter-increment: chapter 1;*/

            counter-reset: section;      /* set section counter to 0*/
            font-size: 20px;
            font-weight: bold;
        }
        .section:before {
            content: counter(chapter) "." counter(section) ".";
            display: inline;
        }
        .section {
            counter-increment: section;
            /* increment section counter by 1, same as counter-increment: section 1;*/

            font-size: 15px;
            font-weight: bold;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <div class="chapter">First chapter</div>
    <div class="section">First section in Chapter 1</div>
    <div class="section">Second section in Chapter 1</div>
    <div class="section">Third section in Chapter 1</div>
    <div class="section">Fourth section in Chapter 1</div>
    <div class="chapter">Second chapter</div>
    <div class="section">First section in Chapter 2</div>
    <div class="section">Second section in Chapter 2</div>
</body>