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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content