CSS Pseudo-elements

For example, a pseudo-element can be used to:

• Style the first letter or line of an element.
• Insert content before or after the content of an element.

The syntax of a pseudo-element is: selector::pseudo-element { property: value; }. Note the double colon :: which distinguishes pseudo-elements from pseudo-classes.

::first-line and ::first-letter

The ::first-line pseudo-element is used to add a special style to the first line of a text. The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

p::first-line {
  font-weight: bold;
}
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

::before and ::after

The ::before and ::after pseudo-elements can be used to insert some content before or after the content of an element. The content property is required for these to work.

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