Pseudo-element selectors

Pseudo-elements add special effects to selectors.

Pseudo-elements add special effects to selectors.

Pseudo-element Description CSS Example
after Specifies content to be inserted after an element, for example, ':' after a label. 
label::after {
 content:": ";}
before Specifies content to be inserted before an element, for example, the text 'Note' before the content of a paragraph. 
p.note::before {
 content:"Note: ";}
first-letter Applies to the first character of the first line of text within an element, for example, the initial drop-cap letter of a paragraph. 
h1 > p::first-letter {
 font-weight:bold;
 font-size:32pt;}
first-line Applies to the first line of text, for example, the first line of the first paragraph that is a child of h1 element. 
h1 > p::first-line {
 font-variant:small-caps;}
marker Allows styling on the marker of li elements of a list, so the style of the list item content can be separated from the style of the marker. 
li::marker {
 color:green;}
mcs-between Combined with mcs-item this pseudo-element inserts a separator between feed items. 
ticker|feed::mcs-item::mcs-between {
 content:" *** ";}
mcs-cancel An XForms group element which generates a cancel link on a form fragment, with the text 'Cancel'. 
xforms|group::after::mcs-cancel {
 content:"Cancel";}
mcs-cell Represents a cell within one of the dynamic containers that are part of the Client Framework 2 platform. A cell is simply a container for content rendered by the container. The cells are created dynamically on the client and therefore there are no real elements to style. 
#items::mcs-cell {
 width:60px;
 height:80px;
 top:0pt;
 float:left;
 display:inline;
 position:absolute;}
mcs-complete An XForms group element which generates a 'Complete' button instead of the 'Next' button in the last step of the form wizard. 
xforms|group::after::mcs-complete {
 content:"Complete";}
mcs-item A separator between items in a BuzzCast feed. The content property provides the separator. 
ticker|feed::mcs-item::mcs-between {
 content:" *** ";}
mcs-frame Associates an element with a frame. This pseudo-element only has an effect in frame mode, otherwise it is ignored. The associated frame is given by the mcs-container property which is the only property that is allowed to be specified for this pseudo-element. If the pseudo-element is not specified, or its value is 'current', then the associated frame for the element is the one that contains the frame page that itself contains this element. Note that if a frame is to be associated with a cst:template element, then the ::mcs-frame pseudo-element must be specified explicitly. The name of the frame is determined as follows: if its value is specified as a string then that string is the name of the frame; if its value is specified using the mcs-container-instance() function and it has no indices, then the name of the frame is the first parameter to that function. Refer to the topics entitled Frames and Frame layouts and regions for more information about the frames model. 
ui|button::mcs-frame {
 mcs-container: "frame1";}
mcs-next An XForms group element that generates a link to the following form fragment, with the text of the group label. 
xforms|group::after::mcs-next {
 content:normal;}
mcs-outside

Allows page authors to create wrapping elements in order to add extra styles without modifying an input markup, for example, authors can use ::mcs-outside to specify multiple borders or backgrounds for an element.

This pseudo-element can be combined with itself to create multiple wrapping elements, but it cannot be combined with any other pseudo-classes or pseudo-elements. It is supported on the following elements: a, abbr, address, blockquote, cite, code, dfn, div, dl, em, kbd, nl, ol, p, pre, quote, samp, span, strong, sub, sup, ul, var, cst:a, cst:case, cst:image, cst:otherwise, cst:template, cst:value, ui:box, ui:button, ui:flexible-box, ui:inline, ui:list-view, ui:overlay, ui:search-bar, ui:slide-view, xforms:input, xforms:label, xforms:secret, xforms:select, xforms:select1, xforms:submit, xforms:textarea.

It is the page author's responsibility to set the display value of an ::mcs-outside pseudo-element to an appropriate value for the element with which it is associated, e.g. if the element is a block element, then ::mcs-outside must be a block element too. The default display setting of an ::mcs-outside pseudo-element is 'none'.

 
<?xml version="1.0" encoding="UTF-8"?>
<html
 xmlns="http://www.w3.org/2002/06/xhtml2">
 <head>
  <title>div</title>
  <style type="text/css">
   .item {
    border: thin solid red;
    padding: 1px;
    background: gray;
    mcs-border-radius: 2px; 
    mcs-box-sizing: border-box
   }
   .item::mcs-outside {
    display: block; 
    border: thin solid green;
    padding: 2px;
    background: white;
    mcs-border-radius: 3px;
    mcs-box-sizing: border-box
   }
   .item::mcs-outside::mcs-outside {
    display: block;
    border: thin solid black;
    padding: 3px;
    background: blue;
    mcs-border-radius: 4px;
    mcs-box-sizing: border-box
   }    
  </style>
 </head>
 <body>
  <div class="item">Item</div>
 </body>
</html>
mcs-previous An XForms group element which generates a link to the preceding form fragment, with the text 'Back'. 
xforms|group::before::mcs-previous {
 content:"Back";}
mcs-reset An XForms group element which generates a reset link on a form fragment, with the text 'Clear'. 
xforms|group::after::mcs-reset {
 content:"Clear";}
mcs-shortcut A menu element followed by the shortcut 'Alt + E'. 
menu::mcs-shortcut {
 content:"Alt + E";}

Related topics