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!
Top comments (0)