::after
::after is a pseudo element which 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::after {
content: "hi";
}<div>
hi
-- Rest of stuff in side div --
</div>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).
- A counter:
content: counter(li);- Really useful for styling lists until :marker comes along.
Note that you cannot insert HTML (at least, that will be rendered as HTML). content: "<h1>nope</h1>";
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.
More Information
- A whole bunch of cool stuff they can do.
- Support chart on transitioning/animating
- Screencast Introduction
- Using with sprites
Browser Support
Little issues:
- Firefox 3.5- wouldn't allow absolute positioning of pseudo elements.
- In Opera 9.2, whitespace is always displayed within this pseudo-element as if it’s
pretext. - IE 8 doesn't support z-index on them
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.3+ | 3.5+ | 6+ | 8+ | ? | ? |
Again, what do the ‘Before’ and ‘After’ elements do?
This is something that interests me (:before and :after).
But you’ve still kept the clipped sprite from the video.
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.
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:
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:
html:after {
content: “© 2012. All Rights Reserved.”;
background-color: transparent;
font-size:x-small;
font-family: Arial, Helvetica, sans-serif;
margin-left: 40%;
text-align: center;
padding-bottom: 20px;
}