An attribute can be rendered in the document view by inserting a value editor in the generated content.

XHTML example: a pair of radio buttons are used to set the dir attribute of a p of class bidi.

p.bidi:after {
    display: block;
    content: "Direction: " 
             radio-buttons(attribute, dir,
                           labels, "Left to right\A Right to left",
                           values, "ltr\A rtl");
    font-size: smaller;
}

This way of rendering attributes is fine but is too tedious to specify to be used on a large scale, for example to style XML data where most elements are empty but have several attributes.

In such case, it is recommended to use CSS rules where the selector contain the :attribute() non-standard pseudo-element.

The :attribute() pseudo-element has a attribute name parameter. This attribute name may be specified as a CSS identifier (specifies a name having no namespace, example: dir), a CSS string (also specifies a name having no namespace, example: "dir") or a CSS qualified name (example: xlink|href). Note that name wildcards (examples: xlink|*, *|href) are not supported here.

Same example as above but using this type of rule:

p.bidi2:after {
    display: block;
    content: attributes();
}

p.bidi2::attribute(dir) {
    attribute-content-left: "Direction:";
    attribute-content-middle: radio-buttons(attribute, dir,
                                            labels,
                                            "Left to right\A Right to left",
                                            values, "ltr\A rtl");
    show-attribute: always;
    font-size: smaller;
}

Same example as above with all attributes a p of class bidi2, displayed when they are added to this element, except for the dir attribute which is always displayed:

p.bidi2:after {
    display: block;
    content: attributes();
}

p.bidi2::attribute() {
    attribute-content-left: attribute-label() ":";
    attribute-content-middle: value-editor(attribute, attribute());
    attribute-content-right: remove-attribute-button(attribute, attribute());
    show-attribute: when-added;
    font-size: smaller;
}

p.bidi2::attribute(dir) {
    attribute-content-left: "Direction:";
    attribute-content-middle: radio-buttons(attribute, dir,
                                            labels,
                                            "Left to right\A Right to left",
                                            values, "ltr\A rtl");
    show-attribute: always;
}

Notice that in the above figure, the values of the dir attribute are displayed in green. This is because, unlike in first example, this p of class bidi2 has no dir attribute yet. By default (this can be specified): A green foreground color means that attribute is not set. A red foreground color means that attribute value is invalid or that the value editor is not well suited to display this kind of values.