Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Selectors Advanced Selectors Pseudo-Elements - ::before and ::after

Diego Murray
Diego Murray
2,515 Points
Posted by Diego Murray
Diego Murray
2,515 Points

Pseudo Classes or Pseudo Elements

What is the difference between Pseudo Classes and Pseudo Elements?

2 Answers

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

Pseudo classes are used to select elements based on conditions, rather than their structure in the HTML document tree, such as selecting a:link to only get links that haven't been visited.

A pseudo element is used to select what is essentially a sub-part of an element, such as :before, :after, or :first-letter

Axel Perossa
Axel Perossa
13,930 Points

Just a bit of extra info: Pseudo classes can also target elements based in the document structure and its relation to other elements, e.g. :first-child

Karan Nahar
Karan Nahar
16,157 Points
Karan Nahar
Karan Nahar
16,157 Points

Pseudo classes : Pseudo classes are used to describe a state of an element. Example - img:hover is used to apply a style when a user hovers over the image.

Pseudo elements : Pseudo elements target virtual elements. For example you must have seen a bottom border on top navigation links in web pages.

Did you know that you can combine pseudo classes with pseudo elements. For example

a:hover::before {
   content: ">";
}

Here is a cool trick I used to animate bottom border of nav links. Check out and hover on the nav links. This is my resume site here