CSS Pseudo Elements

Hey friend, are you finding CSS pseudo-elements difficult?
No worries, I was also finding it difficult when I was new to this CSS. In this doc I will be explaining you CSS pseudo-elements in a very easy manner. So lets start,
Suppose I have given you a task to design only the first letter of a word in your HTML page. How will you do this? One will say that okay I will apply a span tag to that letter, and then I will style it. But my friend its 2021 are you thinking that is it a good practice. At the end it's a single word then why will you apply <span> tag.

Right?

Here comes the role of this pseudo-elements. Pseudo-elements is used to customize any specific part of any element.
Till now you have understood that okay a CSS pseudo-element is used to style specified parts of an element. But I you don't know how to do that.
Before jumping into that let me explain you the different types of CSS pseudo-elements present.

There are majorly 6 pseudo-elements available and they are:

• ::before
• ::after
• ::first-letter
• ::first-line
• ::marker
• ::selection

Now, let just discuss them one by one.

• ::before

p::before{
   content: 'Hello world';
   color: blue;
}

So, before is used to add a content before any class or element. In the above written example Hello world will be embedded before the paragraph with blue color. Now you can customize it according to your choice.

• ::after
  There is no difference in ::before and ::after but as their name suggests before adds content before any element while after will embed it after the element.

• ::first-letter
  

p::first-letter{
   color: blue;
}

It is used customize the first letter of any element as we have discussed in the example.

• ::first-line
  Again there is no difference between ::first-line and ::first-letter but as their name is suggesting it is used to customize the first line of any element.

• ::marker
  The marker is used to style the markers of the list item.

• ::selection
  Honestly talking this is my favourite pseudo-element, as it helps to customize the area that has been selected/high-lighted by the user on the dom.
  Example speaks: means by default if you high-light any text on the browser the background color changes to blue, but now you customize it by your own. Isn't it amazing. I think you will agree with me.

So, this is was all about the pseudo-elements, hope you liked it and get some new knowledge.
Thank you!