::before and ::after

Created on: Wed 14 Oct 20 Updated: Fri 20 Jan 23

A few notes on these important pseudo elements.

Double colons

This is the correct way though single work because that was the original CSS spec and browsers don’t want to break people’s sites that are using the original spec.

Single colon is for pseudo classes like a:hover and pseudo selectors like h2:first-of-type.

Before and After what?

The ::before and ::after refer to before the first child or content of an element NOT before or after the element itself. If an element has not children, like say a typical paragraph the ::before is before all the content.

header#navbar {
    position: fixed;
    z-index: 100;
    width: 100%;
    top: -110px;
    transition: top 0.4s; /* Transition effect when sliding down (and up) */
}

NB. You cannot use pseudo elements on images because the images are the content rather than a containing element. This is true even is you set the pseudo elements to block (inline is the default).

Absolute positioning

With absolute positioning you need to set the parent element to something other than the default value static. The parent here is the parent of the ::before pseudo element. If you’re setting p::before to position: absolute then set p to position: relative.

Content

The content property is essential to bring the element into existense, even if it is empty content: '';

This can contain different types of content

String: any text or string surrounded by single quotes: content: 'New';
Image: using content: url(//link.to/your-image.jpg); (for placeholder images use either https://picsum.photos/200/150 where the last two numbers are width and height size in pixels, OR //unsplash.it/400/200)
The term open-quote to add an opening quotation mark: content: open-quote; and content: close-quote; for a closing quote mark.
You can get the value of HTML attribute selectors using content: attr(title). Here the word title means it will grab the value of the HTML title attribute. You can use this to make clear a which language is being used if your code uses the data-lang attribute to let the syntax highlighter which language to color for.
The term counter will put a number increasing in value for each element on the page. So h2::before { content: counter(the-name);} is the first bit of code where the-name can be any name you choose for this particular counter. Next you you need to set your counter to reset in it a parent element with counter-reset: the-name. Note this not necessarily the direct parent of your h2 tags. .Using counter will add 1 to the first h2, a 2 to the second, 3 to the third etc. So it can be a good way to make a numbered list of different items.

Multiple strings and variables

The content property can take multiple strings and variables. Continuing with the counter example above we might like our number to be enclosed in parentheses and with a space before the rest of the h2 text….

h2::before {
    content: '(' counter(the-name) ') ';
}

The first string gets the opening bracket. Next is the variable counter and it’s name. Then there is the closing bracket with a space.

Using `::after` to indicate an external hyperlink

If you have a page with different links it can be useful to distinguish on site links from those to an external site. An icon following and external link is a good way to do this.

Using ::after you can add the following CSS…

a[href^="http"]::after {
    font-family: 'Font Awesome 5';
    content: ' \f35d';
    font-weight: 900;
}

This selects all links that begin with http (which includes https).

CSS Geek on ::before and ::after

❮ Previous

Next ❯