Difference Between Pseudo-Class and Pseudo-Element in CSS

CSSWeb DevelopmentFront End Technology

Pseudo-Class

A pseudo-class represents a state of a selector like :hover, :active, :last-child,etc. These start with a single colon(:).

The syntax of CSS pseudo-class is as follows −

:pseudo-class{
   attribute: /*value*/
}

Pseudo-Element

Similarly, a pseudo-element is used to select virtual elements like ::after, ::before, ::first-line, etc.

These start with a double colon(::).

The syntax of CSS pseudo-element is as follows −

::pseudo-element{
   attribute: /*value*/
}

Example

The following examples illustrate CSS pseudo-class and pseudo-element property.

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
   padding: 3%;
   font-size:1.4em;
   color: tomato;
   background: bisque;
}
</style>
</head>
<body>
<p>You're somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html>

Output

This will produce the following result −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p::after {
   content: " BOOM!";
   background: hotpink;
}
p:last-child {
   font-size: 1.4em;
   color: red;
}
</style>
</head>
<body>
<p>Anymore Snare?</p>
<p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p>
<p>Hit</p>
<p>Pop</p>
</body>
</html>

Output

This will produce the following result −

raja
Published on 12-Mar-2021 10:48:59
Advertisements