CSS Pseudo Elements
CSS pseudo-elements are used to add special effects for some selectors.
Grammar
Syntax of pseudo-element:
selector:pseudo-element {property:value;}
CSS classes can also use pseudo-elements:
selector.class:pseudo-element {property:value;}
:first-line Pseudo Element
The "first-line" pseudo-element is used to set a special style to the first line of text.
In the following example, the browser will format the first line of text of the p element according to the style in the "first-line" pseudo-element:
Example
p:first-line { color:#ff0000; font-variant:small-caps; }
Note: The "first-line" pseudo-element can only be used for block-level elements.
Note: The following attributes can be applied 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
:first-letter Pseudo Element
The "first-letter" pseudo-element is used to set a special style to the first letter of the text:
Example
p:first-letter { color:#ff0000; font-size:xx-large; }
Note: The "first-letter" pseudo-element can only be used for block-level elements.
Note: The following attributes can be applied 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;}
<p class="article">Article paragraph</p>
The above example will turn the first letter of all paragraphs whose class is article to red.
Multiple Pseudo-Elements
It can be used in combination with multiple pseudo-elements.
In the example below, the first letter of the paragraph will be displayed in red and its font size is xx-large. The rest of the text in the first line will be blue and displayed in small capital letters.
The rest of the text in the paragraph will be displayed in the default font size and color:
Example
p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }
CSS - :before Pseudo Element
The ":before" pseudo-element can insert new content before the content of the element.
The following example inserts a picture before each <h1> element:
Example
h1:before { content:url(smiley.gif); }
CSS - :after Pseudo Element
The ":after" pseudo-element can insert new content after the content of the element.
The following example inserts an image after each <h1> element:
Example
h1:after { content:url(smiley.gif); }
All CSS Pseudo-Classes/Elements
Selector | Example | Description |
---|---|---|
:link | a:link | Select all unvisited links |
:visited | a:visited | Select all visited links |
:active | a:active | Select the active link |
:hover | a:hover | The state of putting the mouse on the link |
:focus | input:focus | Select element to have focus after input |
:first-letter | p:first-letter | Select the first letter of each <p> element |
:first-line | p:first-line | Select the first line of each <p> element |
:first-child | p:first-child | The selector matches the <p> element belonging to the first child element of any element |
:before | p:before | Insert content before each <p> element |
:after | p:after | Insert content after each <p> element |
:lang( language ) | p:lang(it) | Choose a starting value for the lang attribute of the <p> element |