::after / ::before

Share this:

::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::after {
content: "hi";
}

<div>
<!-- Rest of stuff inside the div -->
hi
</div>

::before is exactly the same only it inserts the content before any other content in the HTML instead of after. The only reasons to use one over the other are:

You want the generated content to come before the element content, positionally.

The ::after content is also "after" in source-order, so it will position on top of ::before if stacked on top of each other naturally.

The value for content can be:

A string:content: "a string"; - special characters need to be specially encoded as a unicode entity. See the glyphs page.

An image: content: url(/path/to/image.jpg); - The image is inserted at it's exact dimensions and cannot be resized. Since things like gradients are actually images, a pseudo element can be a gradient.

Nothing: content: ""; - Useful for clearfix and inserting images as background-images (set width and height, and can even resize with background-size).

Note that you cannot insert HTML (at least, that will be rendered as HTML). content: "<h1>nope</h1>";

: vs ::

Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but IE 8 only supports the single-colon, so for now, it's recommended to just use the single-colon for best browser support.

:: is the newer format indented to distinguish pseudo content from pseudo selectors. If you don't need IE 8 support, feel free to use the double-colon.

This may be a silly question, but I have some confusion over the use of 2 colons to define a pseudo element.

i.e.,
div:after {}

vs.
div::after {}

I have seen many resources on the Internet (and articles on this site) that use a single colon, but it seems that some “newer” references use double colons. In real-world use (at least as far IE is concerned, IE8 specifically), the double colon is not compatible, but the single colon usage works in IE8 and all newer browsers (at least the ones I’ve tested). So, if a single colon works, why would I ever use double colons?

So, can someone explain the reason behind the use of the double colons?

Oops… I guess I should have completely read the article above which summarizes the fact that IE8 doesn’t support double colon usage, and recommended to use single colons for now… that basically answers my question. Thanks.

It is not that silly at all. So, in all CSS versions up to and including CSS 2.1 there was no way to differentiate what is pseudo-class and what is pseudo-element.

I am still a beginner web developer, and although I now know a lot more than when I started, it is still sometimes confusing to properly differentiate what is pseudo-element and what is pseudo-class. The problem I believe many of us still share.

It is so much easier to to remember that two colon (::) syntax means pseudo-element, and that one colon (:) syntax means pseudo-class. No more guess work involved.

In this particular case, no it is not an example of ::before pseudo-element. Let me explain it:

Pseudo-element generates a virtual element as a last child element inside targeted element. In case you did not know every letter in an element is in a sort of a virtual element called line box. In this case the <div> element was empty (no text, no line box), and when the ::after pseudo-element was created his content “hi” string (generated by content property), was the only thing inside that <div> element, and that is the little illusion that is confusing you.

For example, if you add any text in that <div> element, that “hi” string will end up as the last content in that element.

I do not think so, because content of the pseudo-element is not in the DOM (can not even be selected), therefore it only exists visually for the users of visual browsers, and that excludes screen readers and web crawlers which is not a good practice.

The CSS :after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.

Thanks for the clarification about using double-colons versus not. I’d read elsewhere not to use them, which frustrated me a bit, as I thought they were a helpful in the code visually speaking.

I see why people were saying not to use them (for the compatibility reason with older IE-versions), but my designing-with-legacy-IE-versions-in-mind days are over, so it’s double-colons on out from here!

HI every one in need to give background. But the main issue is want to that the backgrond should apply from left to right and as its come to right site the hight of background should decrease as it come to right side ……… how can i apply it in CSS3

Resurrecting this thread – is it possible to apply a pseudo-element to :after content? For instance, if you wanted to apply :first-letter to it in a neat CSS way, vs. having to hack it with some sort of targeted JS string parsing.

Besides the obvious reasons that you’re using “native” implementations (giving you a better understanding of what you’re actually doing), using a CSS pseudo element is faster than using JavaScript. DOM manipulation is very expensive.

Great. Wanted to learn this “after before” thing since long but learned today only when stucked into something that needs this knowledge to proceed. Wanted to code heading decorations on two projects of mine ( lotterywale and punjabstatelottery)

I hope I will be able to code that successfully. Will ask for help here otherwise.

Im sorry but whats the difference between inserting the css properties into the class with the after selector (.example:after{position:absolute;}) and just inserting it into the class itself (.example{position:absolute;}) , i dont quite get the concept behind this.

It is pretty confusing, but there is indeed a difference. Both ::before and ::after are called pseudo-elements because they elements in and of themselves that are distinct but directly related to the element they are attached to.

I other words, .my-class::after is very much an element like .my-class and can be styled apart from it. Chris has an oldie but goodie on how they work and some interesting things you can do with them: https://css-tricks.com/pseudo-element-roundup/

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.