CSS Pseudo-Elements =================== see CSS Pseudo-Classes CSS pseudo-elements are used to add special effects to some selectors. The syntax of pseudo-elements: selector:pseudo-element {property:value;} CSS classes can also be used with pseudo-elements: selector.class:pseudo-element {property:value;} All CSS Pseudo Classes/Elements ------------------------------- Selector Example Example description ---------------------------------------------------------------------------------------------------------------- :link a:link Selects all unvisited links :visited a:visited Selects all visited links :active a:active Selects the active link :hover a:hover Selects links on mouse over :focus input:focus Selects the input element which has focus :first-letter p:first-letter Selects the first letter of every

element :first-line p:first-line Selects the first line of every

element :first-child p:first-child Selects every

elements that is the first child of its parent :before p:before Insert content before every

element :after p:after Insert content after every

element :lang(language) p:lang(it) Selects every

element with a lang attribute value starting with "it" The :first-line Pseudo-element ------------------------------ The "first-line" pseudo-element is used to add a special style to the first line of a text. The "first-line" pseudo-element can only be applied to block-level elements. Format the first line of the text in p elements: p:first-line { color:#ff0000; font-variant:small-caps; } The following properties apply to the "first-line" pseudo-element: font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear The :first-letter Pseudo-element -------------------------------- The "first-letter" pseudo-element is used to add a special style to the first letter of a text. The "first-letter" pseudo-element can only be applied to block-level elements. Format the first letter of the text in p elements: p:first-letter { color:#ff0000; font-size:xx-large; } The following properties apply to the "first-letter" pseudo- element: font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if "float" is "none") text-transform line-height float clear Pseudo-elements and CSS Classes ------------------------------- Pseudo-elements can be combined with CSS classes: p.article:first-letter {color:#ff0000;}

A paragraph in an article

The example above will display the first letter of all paragraphs with class="article", in red. Multiple Pseudo-elements ------------------------ Several pseudo-elements can also be combined. In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color: p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } CSS - The :before Pseudo-element -------------------------------- The ":before" pseudo-element can be used to insert some content before the content of an element. The following example inserts an image before each

element: h1:before { content:url(smiley.gif); } CSS - The :after Pseudo-element ------------------------------- The ":after" pseudo-element can be used to insert some content after the content of an element. The following example inserts an image after each

element: h1:after { content:url(smiley.gif); }