Hello! Everyone I hope you all are doing great today. Now lets understand what are pseudo elements in CSS. 
Pseudo elements are basically used to style specific parts of an element like inserting a content before or after an element or to style a particular element.
lets understand this with an quick example
html code
<pre><code>&lt;body&gt;
 &lt;h1&gt;Pseudo&lt;/h1&gt;
&lt;/body&gt;
</code></pre>CSS code
<pre><code>h1::after{
 content:"after"; 
}
</code></pre>Using ::after will place the element inside content just after h1
Output:

 <h1>Pseudostart</h1>


&amp; if we use 
CSS code
<pre><code>h1::before{
 content:"before"; 
}
</code></pre>then output will be

 <h1>beforePseudo</h1>


There are many other pseudo elements such as
::first-letter 
::first-line 
::file-selector-button
&amp; many more <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">check here</a>

Hello! Everyone I hope you all are doing great today. Now lets understand what are pseudo elements in CSS. 
Pseudo elements are basically used to style specific parts of an element like inserting a content before or after an element or to style a particular element.

lets understand this with an quick example


html code
``` 
<body>
 <h1>Pseudo</h1>
</body>
``` 

CSS code

```
h1::after{
 content:"after"; 
}
```
Using ::after will place the element inside content just after h1
Output:
<body>
 <h1>Pseudostart</h1>
</body>

& if we use 

CSS code
```
h1::before{
 content:"before"; 
}
```
then output will be

<body>
 <h1>beforePseudo</h1>
</body>

There are many other pseudo elements such as

::first-letter 

::first-line 

::file-selector-button

& many more [check here](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)

Quick guide to understand ::after ::before Pseudo elements in CSS

Pseudostart

beforePseudo