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

You are here: Reference > JavaScript > client-side > style handling > properties > content

content style property

Browser support:

8

Specifies or returns the generated content after or before the element.

Use it with the ::before and ::after pseudo elements and the counterIncrement and the counterReset 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.

Syntax:

object.content;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: content

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to modify the value 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>
    <script type="text/javascript">
        function ChangeContent () {
            // gets the first styleSheet object in the document
            var sheet = document.styleSheets[0];
            // rules in the first stylesheet
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            // the fourth rule
            var rule = rules[3];

            // sets the new value
            if ('content' in rule.style) {
                rule.style.content = "counter(chapter) '/' counter(section) '.'";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>

<body>
    <div class="chapter">First chapter</div>
    <div class="section">First section in Chapter 1</div>
    <div id="sec1.2" 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>

    <br />
    <button onclick="ChangeContent ();">Change Content</button>
    Click on the button to modify the contents of the section style.
</body>