Pseudo elements ::short explanation
A short and simple explanation of pseudo-elements.
What is a pseudo-element ?
A pseudo-element is keyword that we add to the selector which helps tp style the element(s).
For example :
- If you want to change the first letter or first line - use
::first-letteror::first-line - If you want to add some content before or after the element - use
::beforeor::after
Syntax :
selector::pseudo-element {
/* Write your styles here */
}
- selector == any HTML element
<li>,<a>,<p>etc. - pseudo-element ==
::first-letter,::first-line,::before,::afteretc.
Example 1 :
CSS snippet :
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}
In the above example, it will style the first line of the <p> element.
Example 2 :
CSS snippet :
.imp-label::before {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #5915d8;
}
HTML snippet :
...
<body>
<label class="imp-label" for="name">name</label>
</body>
...
In the above example the CSS will be added before the name label.
Example 3 :
CSS snippet :
.imp-label::after {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #e0f56a;
}
HTML snippet :
...
<body>
<label class="imp-label" for="name">name</label>
</body>
...
In the above example the CSS will be added after the name label.
That's it for this blog. I hope you have learnt something from it.
Happy coding. Thank you !