DEV Community

loading...
Cover image for CSS decoded ::before and ::after

CSS decoded ::before and ::after

ruppysuppy profile image Tapajyoti Bose ・2 min read

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: "";
}
Enter fullscreen mode Exit fullscreen mode

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).

Reference

MDN Web Docs

  1. Pseudo-elements
  2. ::before
  3. ::after

Thanks for reading

Reach out to me on:

Discussion (10)

pic
Editor guide
Collapse
mrdanielschwarz profile image
Daniel Schwarz • Edited

“A CSS Pseudo Element is a keyword added to a selector that lets you style a specific part of the selected element(s).”

Actually, this is incorrect, the selected element isn't styled at all. Before/after prepends/appends a new pseudo element, of which you're able to style optionally.

Example:

div::before { 
    content: "Prepended text";
    /* optional styles */
}

div[data-xxx]::before { 
    content: attr(data-xxx);
    /* optional styles */
}
Enter fullscreen mode Exit fullscreen mode

Single colons also work (e.g. :before).

Collapse
ruppysuppy profile image
Tapajyoti Bose Author • Edited

Thanks for pointing it out. I intended to convey the same message, but it became a bit ambiguous. Updated the emphasis and example :)

Collapse
afif profile image
Temani Afif

::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-...

these pseudo-elements generate boxes as if they were immediate children of their originating element, with content as specified by content.

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Updated the wording of the phrase 👍

Collapse
afif profile image
Temani Afif

You should probably quote your definition: developer.mozilla.org/en-US/docs/W...

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Thanks a lot! I am new to blogging and looking for every opportunity to improve :)

Collapse
sittisukintaruk profile image
Sitthisak Intharak

Good job man!

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Thanks a lot! :)

Collapse
urielbitton profile image
Uriel Bitton

good explanation!

Collapse
ruppysuppy profile image