Understanding :before And :after Pseudo-Elements In CSS
Posted by Alex on 28 January, 2013 in | No comments
If you’ve been keeping tabs on various Web design blogs, you’ve probably noticed that the
:after pseudo-elements have been getting quite a bit of attention in the front-end development scene — and for good reason.
:after pseudo-elements are very easy to code (as are most CSS properties that don’t require a ton of vendor prefixes). Here is a simple example:
There are two things to note about this example. First, we’re targeting the same element using
#example:after. Strictly speaking, they are the pseudo-elements in the code.
Secondly, without the
content property, which is part of the generated content module in the specification, pseudo-elements are useless. So, while the pseudo-element selector itself is needed to target the element, you won’t be able to insert anything without adding the
In this example, the element with the id
example will have a hash symbol placed “before” its content, and a period (or full stop) placed “after” its content.
Dreaded Browser Support
As with any front-end technology that is gaining momentum, one of the first concerns is browser support. In this case, that’s not as much of a problem.
Browser support for
:after pseudo-elements stacks up like this:
- Chrome 2+,
- Firefox 3.5+ (3.0 had partial support),
- Safari 1.3+,
- Opera 9.2+,
- IE8+ (with some minor bugs),
- Pretty much all mobile browsers.
The only real problem (no surprise) is IE6 and IE7, which have no support. So, if your audience is in the Web development niche (or another market that has low IE numbers), you can probably go ahead and use pseudo-elements freely.
Pseudo-Elements Aren’t Critical
Fortunately, a lack of pseudo-elements will not cause huge usability issues. For the most part, pseudo-elements are generally decorative (or helper-like) content that will not cause problems in unsupported browsers. So, even if your audience has high IE numbers, you can still use them to some degree.