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

first-line Pseudo-element

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

In the following example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element (where the browser breaks the line, depends on the size of the browser window):

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

The "first-line" pseudo-element can only be used with block-level elements.

The :first-letter Pseudo-element

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

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

The "first-letter" pseudo-element can only be used with block-level elements.

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes:

p.article:first-letter {color:#ff0000;}
<p class="article">A paragraph in an article</p>