25
loading...
What is ::before and ::after in CSS?
In CSS ::before and ::after is a type of pseudo-elements. This allows us to add something before or after an element without the use of HTML.
We use these types of pseudo-elements at different times when designing a website. The simplest example to understand, the bullet mark in front of the list. This way you can add text before or after an element if you want using pseudo-elements.
In this tutorial, we will discuss with examples, how to use ::before and ::after pseudo-elements to sort content on a web page. This tutorial will give you a good idea of how to use :: before and :: after pseudo-elements in CSS.
Pseudo-elements are visible elements on a web page that are not "in DOM" or created from HTML but inserted directly from CSS. It plays a helpful role in various web page designs. It beautifully supports different browsers.
A CSS pseudo-element is a keyword added to a CSS selector that lets you style a specific part of the selected element. For example, ::first-line can be used to change the font of the first line of a paragraph. Since, ::first-line, ::first-letter, ::before, and ::after is a pseudo-element. That's why we need to know about pseudo-element first. So, we are discussing about this.
To use pseudo-element you must enter, As a rule, double colons (::) after selector.
Like this syntax -
Like this syntax -
**
selector::pseudo-element {
property: value;
}**
The ::before selector inserts something before the content of each selected element. The ::before pseudo-element adds content that appears before an element on a web page. In most cases, it is used to add text before an element.
The ::before pseudo-element syntax is -
**
selector::before {
property: value;
}**
The ::after selector inserts something after the content of each selected element. The ::after pseudo-element adds content that appears after an element on a web page. In most cases, it is used to add text after an element.
The ::after pseudo-element syntax is -
**
selector::after {
property: value;
}**
The ::before and ::after pseudo-elements allow you to add content to a specific part of an element you have selected in a CSS rule. The simplest example, the ::before selector could be used to add text before a link. The ::after selector could be used to add a bullet sign after a paragraph of text.
Reach out to me on:
25