Pseudo-elements allow to manipulate elements that don’t exist in the document tree. It can be the content of the document element (first line, first letter) or element that does not exit in document tree but can be create through the pseudo-element . For example first line, first letter can be styled by using pseudo-elements like ::first-line ::first-letter . Pseudo-elements ::before, ::after can create element in document tree and provide styles to this element.

Pseudo-elements:

• do not appear in the document tree;
• only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
• names are case-insensitive

The syntax of pseudo-elements:

selector::pseudo-element {
    property:value
}

Pseudo-element notation uses the single and double colon, so ::first-line and :first-line is the same pseudo-element.
The single colon was used in CSS2 and CSS1 but in CSS3 was replaced by the double colon. The single-colon syntax is still considered for backward compatibility.

List of the pseudo-elements:

• ::first-line (:first-line)
• ::first-letter (:first-letter)
• ::before (:before)
• ::after (:after)
• ::selection (only with the double colons)
• ::placeholder experimental technology
• ::marker experimental technology
• ::spelling-error experimental technology
• ::grammar-error experimental technology

Examples:

Example 1

Pseudo elements can be combined with CSS classes:

p.pe-entry::first-letter{
    color:#62a2bf;
    font-size:2em;
}

Example 2

Several pseudo elements can be combined

p.pe-entry::first-letter{
    color:#62a2bf;
    font-size:2em;
}

p.pe-entry::first-line {
    color:#4bb29e;
    font-size:0.8em;
}

Stick butt in face stare at wall turn and meow stare at wall some more meow again continue staring or burrow under covers, but stare out the window so purr for no reason lounge in doorway so wake up human for food at 4am. Peer out window, chatter at birds, lure them to mouth eat and than sleep on your face for refuse to leave cardboard box. Meow for food, then when human fills food dish, take a few bites of food and continue meowing eat grass, throw it back up kick up litter cough fur ball yet rub face on owner scratch the furniture or purr while eating.

Example 3

Pseudo elements can be combined with CSS pseudo-classes

p.peh-entry:hover::after {
    content:'Content displays on mousover';
    color:#4bb29e;
    font-size:1em;
}

Stick butt in face stare at wall turn and meow stare at wall some more meow again continue staring or burrow under covers, but stare out the window so purr for no reason lounge in doorway so wake up human for food at 4am.

Notes:

Combination pseudo classes with ::first-letter not working in Firefox browser.
Unfortunately combination pseudo classes with ::first-line pseudo element is not working in Chrome (tested chrome 47), Firefox (tested FF 43), Opera (tested Opera 34), except Internet Explorer (testing IE9, IE11).

Resources

• W3C Selectors Level 3
• W3C Selector CSS 2.1