Pseudo-elements

Pseudo-elements

//syntax

selector::pseudo-element {
  property:value;
}

Are used to style specified parts of an element.

For example, it can be used to style the first letter, or line, of an element, insert content before, or after, the content of an element.

Pseudo-elements and CSS Classes

//the example below will display the first letter of paragraphs with class="intro",
//in red and in a larger size

p.intro::first-letter {
  color: #ff0000;
  font-size:200%;
}

Pseudo-elements can be combined with CSS classes.

Multiple Pseudo-elements

//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;
}

Several pseudo-elements can also be combined.

Related concepts

→
Pseudo-elements
→

Pseudo-elements — Structure map

Clickable & Draggable!

Pseudo-elements — Related pages:

Shadow Effects

Counters

Specificity

Pseudo-elements