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: “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 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