CSS before and after pseudo elements

CSS before and after pseudo-elements are used to insert content in an element. The end result will appear like it is in the DOM. pseudo-elements are used to style selectors with certain conditions.

Also Read- Animated Card Effect Using CSS

What are pseudo-elements?

Pseudo-elements are useful when you want to style a selector with a certain condition. E.g.- when you want to style, the first letter of an element. Some pseudo-elements are ::before, and ::after.

How to use pseudo-elements?

The syntax of a pseudo-element is below

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

In CSS 3 we use a pseudo-element with a double colon. But in IE 8 we must use a single colon. Double colon is in the latest version of CSS.

What is CSS before and after pseudo-elements?

As the name suggests before and after pseudo-elements are used to insert content before any element content or after any element content. See below

div::before {
  content: "before";
}
div::after {
  content: "after";
}

<div>
  before
  <!-- The rest of the content and elements inside the dive -->
  after
<div>

As you can see it put content before or after the content of the element.

The value of the before and after content can be anything, a string, an image, and nothing.

before and after pseudo-elements example

Let’s add an emoji before and after every paragraph of the page using CSS pseudo-elements.

See the Pen CSS before and after pseudo-elements example by Rare Programmer (@rareprogrammer) on CodePen.

Summery

pseudo-elements are used to style the selectors and are useful in many ways. But, it only makes sense when used properly.

If you came here while reading then you might like this article. Please do share and comment on any doubt or thought.