Before and After Pseudo Selectors in CSS

In this article, we will learn about the Before and After Pseudo Selectors in CSS.

Before Pseudo Selector

In CSS, the before(::before/:before) pseudo selector creates a pseudo-element that is the first child of the element, we selected. The content property is frequently used to add decorative content to an element. By default, it’s inline.

Syntax:

/* CSS3 Syntax /
element::before {
/ CSS Styling */
}

/* CSS2 Syntax /
element:before {
/ CSS Styling */
}

Example:

HTML

<p> You will see a green box before this which is inserted by the ::before pseudo-selector. </p>

CSS

p::before {
content: “This is a green box”;
background-color: green;
}

Output:

You will see a green box before this which is inserted by the ::before pseudo-selector.

Before and After Pseudo Selectors

After Pseudo Selector

In CSS, the after(::after/:after) pseudo selector creates a pseudo-element that is the last child of the element, we selected. The content property is frequently used to add decorative content to an element. By default, it’s inline.

Syntax:

/* CSS3 Syntax /
element::after {
/ CSS Styling */
}

/* CSS2 Syntax /
element:after {
/ CSS Styling */
}

Example:

HTML

<p> You will see a green box after this which is inserted by the ::after pseudo-selector. </p>

CSS

p::after {
content: “This is a green box”;
background-color: green;
}

Output:

You will see a green box after this which is inserted by the ::after pseudo-selector.

That’s all about the Before and After Pseudo Selectors in CSS.

Hope this article will guide you to recognize all about the Before and After Pseudo Selectors in CSS that you needed and still, if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.