Let’s not confuse pseudo “:before” & “:after” in CSS

The :before and :after pseudo-elements in CSS can be used to insert content before or after an element. These pseudo-elements are often used to add decorative content, such as icons or borders, to an element without having to add additional HTML markup.

To use the :before and :after pseudo-elements, you first need to create a new selector that targets the element you want to modify.

For example, if you want to add a border to all <p> elements, you could use the following CSS:

p:before, p:after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: red;
}

This CSS creates two new pseudo-elements for each <p> element, one before and one after the element.

The content property is used to specify the content of the pseudo-elements, and the display, width, height, and background-color properties are used to style the pseudo-elements.

You can then use the :before and :after pseudo-elements to position the content relative to the element. For example, you could use the following CSS to position the pseudo-elements at the top and bottom of the <p> element:

p:before {
  position: absolute;
  top: 0;
  left: 0;
}

p:after {
  position: absolute;
  bottom: 0;
  right: 0;
}

This CSS positions the :before pseudo-element at the top-left corner of the <p> element and the :after pseudo-element at the bottom-right corner of the <p> element.

You can also use the :before and :after pseudo-elements to insert content directly into the <p> element. For example, you could use the following CSS to insert an arrow icon before the <p> element:

p:before {
  content: '→';
  margin-right: 5px;
  font-size: 20px;
  color: red;
}

This CSS inserts the → character as the content of the :before pseudo-element and styles it with a margin, font size, and color. The resulting <p> element will look something like this:

<p>
  → This is a paragraph with an arrow icon before it.
</p>

In Conclusion

Overall, the :before and :after pseudo-elements in CSS provide a convenient way to insert content before or after an element without having to add additional HTML markup.

They can be useful for adding decorative content or for creating complex layouts without the need for extra elements.