What is a Pseudo Element in CSS?
A CSS Pseudo Element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line
can be used to style the first line of a paragraph, ::before
can be used to prepend an element and style it as well, etc.
The main utility of the Pseudo Element is for cosmetic purpose only.
In CSS3 the Pseudo Elements are represented by ::<pseudo-element>
, even though the CSS2 syntax :<pseudo-element>
still works on most browsers for the Pseudo Elements that were available in CSS2.
What is the use of ::before
and ::after
?
In CSS, ::before
and ::after
creates pseudo-elements that is the prepended and appended to the selected element respectively.
How do I use ::before
and ::after
in my website?
One really important thing to keep in mind while using ::before
and ::after
is to set content
property in the css
selector::before{
/* without content the pseudo-elements will not work */
content: "";
}
After adding the content, you can style them just like any other element
Some simple examples of how ::before
and ::after
can bring you website to life are given below.
Quotes
Adding opening and closing quotes from CSS using ::before
and ::after
. The quote class can be used on any element to add quote-like styling.
Underline on Hover
CSS ::after
is used to create an animated underline for links on hover (style prevalent in navlinks).
Info on Hover
CSS ::after
is used to create animated info displaying on hover (similar to the popups in Hacker Earth and Leet Code).
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Reference
MDN Web Docs
Thanks for reading
Reach out to me on:
Top comments (10)
::before and ::after creates pseudo-elements that is the first and last child of the selected element respectively. --> The pseudo-element will not become "child" of selected element in a sense that we cannot select them using Child combinator
.parent > *
or Descendant combinator.parent *
. also:last-child
and:first-child
don't apply to them.To be more accurate, we should say "they behave as child" like said in the specification: w3.org/TR/css-pseudo-4/#generated-...
Updated the wording of the phrase 👍
Thanks for pointing it out. I intended to convey the same message, but it became a bit ambiguous. Updated the emphasis and example :)
You should probably quote your definition: developer.mozilla.org/en-US/docs/W...
Thanks a lot! I am new to blogging and looking for every opportunity to improve :)
Good job man!
Thanks a lot! :)
good explanation!
Thankyou!