Content properties

Purpose

Defines generated content values.

Controls

Control Description Options Property
Content Allows authors to specify the content of an element or pseudo-element using styles. The property is ignored on elements that are not presentational, or which cannot have presentational content. contents, none, normal theme_content_prop.html#content
Increment Counter The name of an element used to increment the counter. An optional integer defines the amount to increment for every occurrence of the element (default '1'). Zero and negative integers are allowed. none, <identifier> <integer>   theme_content_prop.html#counter-increment
Reset Counter One or more names of counters, each one optionally followed by an integer, which gives the value that the counter is set to (default '0'). none, <identifier> <integer>   theme_content_prop.html#counter-reset

Properties

content

Allows authors to specify the content of an element or pseudo-element using styles. The property is ignored on elements that are not presentational, or which cannot have presentational content. The default value is 'normal'.

Option Description
contents Concatenates the element's descendants.
inhibit On elements, it prevents the children of the element from being rendered as children of this element. On pseudo-elements, it prevents the creation of the pseudo-element.
none Sets the content of the element to nothing.
normal Sets the content of the element to normal, which defaults to 'none'.
url('URI') The URI of the image to display.
mcs-component-url('URI') The URI of the image policy to use.
mcs-transcodable-url('URI') The URI of the image to display. The image will be transcoded, if necessary.
<string> The string value to use as the content of the element.
inherit The value of the property should be inherited from the parent element.
counter-increment

The name of an element used to increment the counter. The default value is 'none'.

Option Description
none No counters will be incremented.
<identifier> <integer> Identifies the counter that should be incremented. An optional integer defines the amount to increment for every occurrence of the element. The default value is '1'. Zero and negative integers are allowed.
inherit The value of the property should be inherited from the parent element.
counter-reset

One or more names of counters, each one optionally followed by an integer, which gives the value that the counter is set to. The default value is 'none'.

Option Description
none No counters will be reset.
<identifier> <integer> Identifies the counter that should be reset. An optional integer specifies the value of the selected counter. The default value is '0'.
inherit The value of the property should be inherited from the parent element.

Example

The example adds the text 'Section' to each h1 and increments the count from 1, and increments section numbers at each h2.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs">
  <head>
    <title>Content properties</title>
    <style type="text/css">
      h1 {
        counter-reset: ch2;
      }
      h1::before {
        counter-increment: ch1;
        content: "Section " counter(ch1) ". ";
      }
      h2::before {
        counter-increment: ch2;
        content: counter(ch1) "." counter(ch2) " ";
      }
    </style>
  </head>
  <body>
    <h1>Title 1</h1>
    <h2>Subtitle 1.1</h2>
    <h2>Subtitle 1.2</h2>
    <h1>Title 2</h1>
    <h2>Subtitle 2.1</h2>
    <h2>Subtitle 2.2</h2>
  </body>
</html>

Related topics