CSS Text

Pseudo-elements for Text

Pseudo-elements for text, allow you to style specific parts of text content, such as the first line or first letter.

The CSS ::first-line Pseudo-element

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

Note: The ::first-line pseudo-element can only be applied to block-level elements.

Example

p::first-line
{

color: red;
  font-variant: small-caps;

font-size: 19px;

}

The CSS ::first-letter Pseudo-element

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

Note: The ::first-letter pseudo-element can only be applied to block-level elements.

Example

p::first-letter
{

color: red;

font-size: xx-large;

}

Pseudo-elements and HTML Classes

Pseudo-elements can easily be combined with HTML classes.

Example

p.intro::first-letter {
  color: #ff0000;

font-size: 200%;
}

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

In the following example, the first letter of <p> elements will be red and 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 in the default font size and color:

Example

p::first-letter
{

  color: red;

  font-size: xx-large;

}

p::first-line
{

color: blue;

font-variant: small-caps;

}