CSS Pseudo Elements

Pseudo Elements are special keywords that allow us to style specific parts of an element. Unlike regular elements, pseudo-elements don’t represent actual HTML elements but provide a way to select and style certain parts of an element’s content or structure. They are denoted by a double colon (::) followed by the name of the pseudo-element.

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

In the below PDF we discuss about  CSS Pseudo Elements in detail in simple language, Hope this will help in better understanding.


Common Pseudo Elements:

1:  ::before and ::after:

These pseudo-elements allow you to insert content before or after the content of an element.

.example::before {
content: "Before ";

2: ::first-line and ::first-letter:

::first-line targets the first line of a block-level element.
::first-letter targets the first letter of the first line.

p::first-line {
font-weight: bold;
p::first-letter {
font-size: 150%;

3:  ::selection:

Styles the portion of text that is selected by the user.

::selection {
background-color: #ffcc00;
color: #000;

4:  ::nth-child and ::nth-of-type:

These pseudo-elements allow you to select elements based on their position in a parent element.

li:nth-child(even) {
background-color: #f2f2f2;

5: ::not:

Negates a selector, allowing you to select everything except the specified element.

p:not(.special) {
color: #333;


CSS pseudo-elements are a valuable asset in a web developer’s toolkit, offering enhanced control and creativity in styling. Whether it’s adding decorative elements, inserting content dynamically, or fine-tuning the structure, pseudo-elements empower developers to craft visually stunning and engaging web pages. By mastering the art of pseudo-elements, we can unlock a new level of design possibilities and bring our web projects to life.

Related Question

CSS pseudo-elements are special keywords that allow you to style a specific part of an HTML element. They are denoted by double colons (::) and are used to target and style certain portions of an element that are not represented by actual HTML content.

Pseudo-elements are widely supported in modern browsers. However, it’s essential to check compatibility for specific pseudo-elements or features, especially when working with older browser versions.

Pseudo-elements can be applied to most HTML elements, but their applicability depends on the specific pseudo-element and the HTML element. Some pseudo-elements, like ::first-line or ::first-letter, are limited to certain types of elements.

One commonly used pseudo-element is ::before or ::after. These are often used to insert content before or after an element’s actual content, allowing for additional styling or decorative elements without modifying the HTML structure.


The Ultimate Guide to CSS

A Complete Guide to CSS

A Complete Guide to CSS

The Ultimate Guide to CSS

CSS Background The background property

The Ultimate Guide to CSS

CSS Units – Explained with

Leave a Comment

Your email address will not be published. Required fields are marked *

// Sticky ads