CSS

We can do some cool stuff with the pseudo elements ::before and ::after. For every element on the page, we basically get two more! Let's try a few here.

Header

Notice the header above? If you look at our 'index.html' file, the header text is simply "CSS". But using the pseudo element ::after on the header, we added the words "Pseudo Elements" and gave it a different font and color.

H3 headings

Notice the h3 headings? Using the pseudo element ::before, we added an asterisk before each of the h3 headings.

Nav Items

Notice the navbar items? Using both ::before and ::after pseudo elements on the navbar items, we added red symbols around each one.