how to use before and after in Scss 2020

[Total: 1   Average: 5/5]

The CSS :before and :after properties are what are also known as pseudo-elements. They are used to add something before or after the content of an element. There are a lot of great uses for these pseudo elements, and we are here to explore some of them.

The Syntax of before and after in CSS

If we have an element like this one:

We can add a pseudo-element before it using CSS, like this:

h2:before {
    content: “Hello“;
    color : blue;

<script async src=""></script>
<ins class="adsbygoogle" style="display: block; text-align: center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-2624278588064218" data-ad-slot="6795317647"></ins>
     (adsbygoogle = window.adsbygoogle || []).push({});

how can we user before and after in Scss?

Live Example

Leave a Reply

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages