Pseudo Elements in CSS with Examples

Pseudo elements in CSS allow you to style specific parts of an element that is not directly accessible with normal CSS selectors. For example, you can use pseudo-elements to:

Style the first letter of a paragraph using ::first-letter pseudo element.
Style the first line of text in a paragraph using ::first-line pseudo element.
Insert content before or after an element’s content using ::before and ::after pseudo-elements.

These features give you more control over styling with no need to modify the actual HTML structure. Pseudo-elements allow you to target and style specified parts of an element that regular selectors cannot.

This is because these parts are not defined in the HTML document tree model, which sees the document only as a hierarchical tree of elements.

Pseudo elements essentially behave like elements, even though they are not real elements in CSS because they are not part of the HTML document tree.

Syntax of Pseudo Elements in CSS

The general syntax for using pseudo elements in CSS is as follows:

selector :: pseudo-element {
   /* CSS style */
}

In the above syntax, the selection pseudo element always starts with the double colon (::). This convention is an attempt to distinguish between pseudo-classes and pseudo-elements. However, you can also use a single colon (:) because most of the web browsers support both conversions.

The selector in the above syntax represents the type of HTML element you want to style. For example, p, div, etc.

Commonly Used Pseudo-elements

CSS provides the following pseudo-elements to style certain parts of an HTML element. They are as:

::first-letter: Styles the first letter of a block-level element.
::first-line: Styles the first-line of a block-level element.
::before: Inserts something before the actual content of an element.
::after: Inserts something after the actual content of an element.
::marker: Styles the marker box of a list item.
::selection: Applies styling to text that is selected or highlighted by the user.

Let’s understand each one with the help of examples.

The ::first-letter Pseudo-element

The ::first-letter pseudo-element allows you to select the first letter of the first line of text content of the block-level element. You cannot apply it to the inline elements. Let’s take an example on it.

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
   color:red;
   font-size:3rem;
   font-weight: bold;
}
</style>
</head>
<body>
   <p>You can use the ::first-letter pseudo-element to add special effects to the first letter of a block-level text element.</p>
</body>
</html>

Output:

In this example, the p::first-letter selector will select and apply the specified CSS style to only the first letter of the paragraph element.

You can apply the following properties 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

Combining Pseudo Elements with Other Pseudo Classes

CSS also allows you to combine pseudo elements with other pseudo classes. Let’s take an example in which we will combine ::first-letter pseudo element with class pseudo class selector.

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
p.box::first-letter {
  color:red;
  font-size:3rem;
  font-weight: bold;
}
</style>
</head>
<body>
  <p class="box">Learn CSS online with the best trusted tech platform, Scientech Easy.</p>
  <p>Scientech Easy offers in-depth tutorials with real-world examples</p>
</body>
</html>

Output:

In this example, we have combined pseudo-element ::first-letter with the pseudo-class to style the first letter of <p> element with class=”box”. This style changes the first letter in red and in a larger size.

The ::first-line Pseudo-element

The ::first-line pseudo element allows you to add a specific style to only the first line of the text content within a block-level element. This means the first line in the web browser. The length of text depends on various factors, such as the width of the element is one of them.

The ::first-line pseudo element does not select any real HTML element. Let’s take an example in which we will format the first line of the text in all <p> elements.

Example 3:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color:red;
  font-size:2rem;
  font-weight: bold;
  text-transform: uppercase;
}
</style>
</head>
<body>
   <p>You can use the ::first-line pseudo-element to add a unique style to the first line of a text.</p>
</body>
</html>

Output:

There are the following CSS properties that you can apply to the ::first-line pseudo-element. They are:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Multiple Pseudo-elements in CSS

You can combine multiple pseudo elements in CSS to add different styling effects within a single element. Let’s take an example in which we will style the first letter of a paragraph to be red and in a xx-large font size.

The rest characters of the first line will be green and in small-caps. While the rest of the paragraph in the browser will look in the default font size and color.

Example 4:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: red;
  font-size: 4rem;
  font-weight: bold;
}
p::first-line {
  color: green;
  font-variant: small-caps;
  font-size: 2rem;
  font-weight: bold;
}
</style>
</head>
<body>
   <p>You can combine multiple the pseudo-elements to add a unique style to the first line of a text.</p>
</body>
</html>

Output:

As you can see in the above output, the p::first-letter selector applies the CSS styles to only the first letter of the paragraph. While the p::first-line selector applies the CSS styles to the rest of the first line of the paragraph in the browser. However, the rest of the paragraph will use the default font size and color.

Let’s take an example in which we will highlight the first line of the paragraph with ::first-line pseudo element.

Example 5:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: yellow;
   font-style: italic;
}
</style>
</head>
<body>
   <p>You can highlight the first line of the paragraph by using ::first-line pseudo-element.</p>
</body>
</html>

Output:

Here, you learned pseudo elements such as ::first-letter and ::first-line in CSS with examples. Stay tuned with the next tutorial where you will learn ::before pseudo-element with examples.