The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page 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::before {
content: "before";
}
div::after {
content: "after";
}<div>
before
<!-- Rest of stuff inside the div -->
after
</div>The only reasons to use one over the other are:
- You want the generated content to come before the element content, positionally.
- The
::aftercontent is also “after” in source-order, so it will position on top of ::before if stacked on top of each other naturally.
Note that the content is still inside the element they are applied to. The naming sort of feels like they might come, ya know, before or after the element, but it’s really before or after the other content inside.
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 clearfixes and inserting images as abackground-image(setwidthandheight, and can even resize withbackground-size). - A counter:
content: counter(li);— Really useful for styling lists (but we also have::markerfor that). - A line break:
content: "Killing \A Me \A Softly";— Great for when you really need one.
Note that you can insert HTML entities in the content property, but no dice as far as them rendering or anything like that.
content: "<h1>I will not render as a Heading 1</h1>";: vs ::
Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but Internet Explorer (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 intended to distinguish pseudo content from pseudo-selectors. If you don’t need IE 8 support, feel free to use the double-colon.
Browser support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 2 | 9 | 12 | 3.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 123 | 124 | 2.1 | 3.2 |
Again, what do the ‘Before’ and ‘After’ elements do?
Check the “More Resources” section. The first link itself is “A whole bunch of cool stuff they can do.”
I know I’m about 3 years late..but, nonetheless –
They just add content before or after specific elements.
Say I want a question mark ( ? ) added after every element.
I would style it like this:
Would give the following output:
Turn down for what?Simple as that! ;)
“But why bother using them?” You may ask.
Apart from the obvious effort saving reasons, these are used to implement some cool css tricks!
Check out the ribbon at the bottom here: http://cybernext.in
Pure CSS my friend! The ribbon’s folded corners make use of ::before and ::after pseudo elements.
Check this out for more : https://css-tricks.com/snippets/css/ribbon/
I think you already knew the significance of :before & :after.
This is something that interests me (:before and :after).
But you’ve still kept the clipped sprite from the video.
Hi teacher
Can I write html tags within before and after?
android support?
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.
Is for semantic and better understand of the code, double colons is for pseudo element like ::first-line, ::-vendor-scrollbar and single colon is for pseudo class like :hover,** :active**
Is this not an example of ::before rather than ::after?
hi
— Rest of stuff in side div —
It is. Here is a CodePen showing it.
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 hope that helps to clarify things for you, at least a little bit.
I want to learnt after and before.
how to learnt about the after and before ?
please I want to solution
after before
Would anyone use :before or :after in the tag to generate a page header & footer? Is this semantically correct to apply a pseudo element to the tag?
Example:
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 emphasis is mine. Source: MDN Docs
Aren’t the HTML examples backwards for ::after and ::before?
hi
— Rest of stuff in side div —
must be change to
— Rest of stuff in side div —
hi
Today I used this information to create a common loading overlay for web apps:
https://gist.github.com/tracend/8553152
Thanks!
That’s cool but what is the > difference between them
Thanks for explaining the difference between : and : :
Simple and Perfect
I dont think it works in android default browzer :(..Any solution ?
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!
I want to learnt after and before.
how to learnt about the after and before ?
please I want to solution
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.
i use before tag to paragraph. i use image in that before tag. how can i fix the hight and width of that image.
You forgot the
attrfunction which allows you to do stuff like:The content image can be resized.
So what is the benefit of using ::after/::before vs using JQuery. I’m having trouble imagining a scenario when I wouldn’t just do this in jQuery.
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 answer, thanks!
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.
Thanks much,
Amitoj
Is it possible to use the psuedo elements within a class?
e.g.
.className li::before {
}
Thanks
What is the use of after before element in CSS selector?
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
::beforeand::afterare 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::afteris very much an element like.my-classand 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/it’s not working with
tagdoes it work with it?
Yes, it does. Something like this:
a::before {content: "";
/* other properties */
}
*,
*:before,
*:after {
}
what does it mean ?
It’s selecting the before/after pseudo-elements for ALL elements. The * means “any tag”.
Where’s ::selection ?
This doesn’t work
body :not(i, [class=-icon], [class*=dashicons], ::before, ::after)
font-family: $font-family !important
…but this works
body :not(i, [class=-icon], [class=dashicons]),
body:not()::before,
body:not(*)::after
font-family: $font-family !important
Please add it to your article because there is no article about this issue.