CSS Pseudo-elements

A pseudo-class can be defined as a keyword which is combined to a selector that defines the special state of the selected elements. Unlike the pseudo-classes, the pseudo-elements are used to style the specific part of an element, whereas the pseudo-classes are used to style the element.

As an example, a pseudo-element can be used to style the first letter or the first line of an element. The pseudo-elements can also be used to insert the content after or before an element.

Syntax

Pseudo-element has a simple syntax which is given as follows:

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

We have used the double colon notation (::pseudo-element) in the syntax. In CSS3, the double colon replaced the single colon notation for pseudo-elements. It was an attempt from W3C to differentiate between the pseudo-elements and pseudo-classes. So, it is recommended to use double colon notation (::pseudo-element) instead of using single-colon notation (:).

In CSS1 and CSS2, there is the use of a single colon (:) syntax for both pseudo-elements and pseudo-classes. The single colon syntax is valid for pseudo-elements in CSS1 and CSS2 for backward compatibility.

Although there are several CSS pseudo-elements, we are discussing some of the most commonly used. The widely used CSS pseudo-elements are tabulated as follows:

pseudo-element	Description
::first-letter (:first-letter)	It selects the first letter of the text.
::first-line (:first-line)	It styles the first line of the text.
::before (:before)	It is used to add something before the element's content.
::after (:after)	It is used to add something after the element's content.
::selection	It is used to select the area of an element that is selected by the user.

Let's discuss the above pseudo-elements, along with an example.

The ::first-letter pseudo-element

As its name implies, it affects the first letter of the text. It can be applied only to block-level elements. Instead of supporting all CSS properties, it supports some of the CSS properties that are given below.

Color properties (such as color)
Font properties (such as font-style, font-family, font-size, font-color, and many more).
Margin properties (such as margin-top, margin-right, margin-bottom, and margin-left).
Border properties (like border-top, border-right, border-bottom, border-left, border-color, border-width, and many more).
Padding properties (such as padding-top, padding-right, padding-bottom, and padding-left).
Background properties (such as background-color, background-repeat, background-image, and background-position).
Text related properties (such as text-shadow, text-transform, text-decoration, etc.).
Other properties are vertical-align (only when the float is 'none') word-spacing, line-height, line-spacing, etc.

Example

<html> 
<head> 
    <style> 
	body{
	text-align: center;
	}
    h1::first-letter { 
	font-family: Lucida Calligraphy;
	font-size: 3cm;
	color: red;
	text-shadow: 5px 8px 9px green;
    } 
	h1{
	color: blue;
	}
    </style> 
</head> 
<body> 
    <h1> Welcome to the javaTpoint.com </h1> 
	<h2> This is an example of ::first-letter pseudo-element. </h2>
</body> 
</html>

Test it Now

Output

The ::first-line pseudo-element

It is similar to the ::first-letter pseudo-element, but it affects the entire line. It adds the special effects to the first line of the text. It supports the following CSS properties:

Color properties (such as color)
Font properties (such as font-style, font-family, font-size, font-color, and many more).
Background properties (such as background-color, background-repeat, background-image, and background-position).
Other properties are word-spacing, letter-spacing, line-height, vertical-align, text-transform, text-decoration.

Example

In this example we will see the use of ::first-line element to add special effects to the element's first line.

<html> 
<head> 
    <style> 
	body{
	text-align: center;
	}
    h1::first-line { 
	font-family: Lucida Calligraphy;
	font-size: 1cm;
	color: red;
	text-shadow: 5px 8px 9px green;
    } 
    </style> 
</head> 
<body> 
    <h1> Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is committed to provide easy and in-depth tutorials on various technologies. </h1> 
	<h2> This is an example of ::first-line pseudo-element. </h2>
</body> 
</html>

Test it Now

Output

The ::before pseudo-element

It allows us to add something before the element's content. It is used to add something before the specific part of an element. Generally, it is used with the content property.

We can also add the regular strings or images before the content using this pseudo-element.

Example

<html> 
<head> 
    <style> 
	body{
	text-align: center;
	}
    h1::before { 
	content: "'Hello World.'";
	color: red;
    } 
    </style> 
</head> 
<body> 
    <h1>Welcome to the javaTpoint.com. </h1> 
	<h2> This is an example of ::before pseudo-element. </h2>
	<h3> In the first line the "Hello World" has added by using the pseudo-element ::before </h3>
</body> 
</html>

Test it Now

Output

The ::after pseudo-element

It works similar to ::before pseudo-element, but it inserts the content after the content of the element. It is used to add something after the specific part of an element. Generally, it is used with the content property.

It also allows us to add regular strings or images after the content.

Example

<html> 
<head> 
    <style> 
	body{
	text-align: center;
	}
    h1::after { 
	content: "'Welcome to the javaTpoint.com.'";
	color: red;
    } 
    </style> 
</head> 
<body> 
    <h1> Hello World. </h1> 
	<h2> This is an example of ::after pseudo-element. </h2>
	<h3> In the first line the "Welcome to the javaTpoint.com." has added by using the pseudo-element ::after </h3>
</body> 
</html>

Test it Now

Output

The ::selection pseudo-element

It is used to style the part of an element that is selected by the user. We can use the following CSS properties with it:

color.
background-color.
Other properties include cursor, outline, etc.

Example

<html> 
<head> 
    <style> 
	body{
	text-align: center;
	}
	h1::selection {
	color: red;
    } 
    </style> 
</head> 
<body> 
    <h1> Hello World. </h1> 
	<h2> Select the text in first line to see the effect. </h2>
	<h3> This is an example of ::selection pseudo-element. </h3>
	</body> 
</html>

Test it Now

Output

CSS classes and pseudo-element

The pseudo-elements can be combined with CSS classes to style the specific element having that class. The syntax of combining the CSS classes with the pseudo-elements is given below.

Syntax

It can be written as:

selector.class::pseudo-element {
property: value
}

Example

This example will affect the first letter of those <h1> elements that have class="example" rather than affecting the all <h1> elements.

<html> 
<head> 
    <style> 
	body{
	text-align: center;
	}
	h1.example::first-letter {
	color: red;
	font-size: 2cm;
	font-family: Lucida Calligraphy;
    } 
    </style> 
</head> 
<body> 
    <h1 class="example"> Hello World. </h1> 
    <h1> Welcome to the javaTpoint.com. </h1> 
	<h3> This is an example of pseudo-element with CSS classes.</h3>
	</body> 
</html>

Test it Now

Output