Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with: Matthew Abbott and Andrew Abbott

Using CSS Pseudo Elements :before And :after

By Ben Nadel on
Tags: HTML / CSS

The CSS pseudo elements, :before and :after, have been around since IE8. So, this is probably not news to many of you. But, for me personally, I just started using the :before and :after pseudo elements and I've been absolutely loving them! They making it much easier to keep design-centric elements out of your markup and in your CSS (where they belong). Anyway, I thought I'd put together a quick demo in case anyone else is late to the party.


 
 
 

 
  
 
 
 

The CSS pseudo elements, :before and :after, prepend and append content to the selected elements, respectively. By default, these elements have an "inline" display quality; but, their display property can be set using CSS just as with any other element. In order for :before and :after pseudo elements to work, they must have a "content" property. This property can be a string value:

  • div:after {
  • content: "Hello World" ;
  • }

... or it can be a URL to an image:

  • div:after {
  • content: url( "img/icon.png" ) ;
  • }

If you don't want to render any content, you can use the empty string; but, you must supply the "content" property in all cases.

These pseudo elements don't show up in the DOM. But, if you're using Firebug or Chrome Dev Tools, you can still view and tweak the pseudo element CSS in the style inspector. These pseudo elements can be styled in the exact same way that any other element can be styled. It's pretty awesome.

That said, here's a quick demo of the :before and :after pseudo elements in action:

  • <!doctype>
  • <html>
  • <head>
  • <meta charset="utf-8" />
  •  
  • <title>CSS Pseudo Elements :before And :after</title>
  •  
  • <style type="text/css">
  •  
  • a.button {
  • background-color: #F0F0F0 ;
  • border: 1px solid #CCCCCC ;
  • border-radius: 4px 4px 4px 4px ;
  • color: #333333 ;
  • display: block ;
  • font-size: 30px ;
  • padding: 6px 30px 4px 58px ;
  • position: relative ;
  • text-decoration: none ;
  • width: 100px ;
  • }
  •  
  • a.button:before {
  • background-color: #FF0066 ;
  • border-radius: 3px 3px 3px 3px ;
  • color: #FFFFFF ;
  • content: "NEW" ;
  • font-family: sans-serif ;
  • font-size: 15px ;
  • left: 9px ;
  • line-height: 15px ;
  • margin-top: -10px ;
  • padding: 3px 3px 2px 3px ;
  • position: absolute ;
  • text-align: center ;
  • top: 50% ;
  • }
  •  
  • a.button:after {
  • background-color: #FFFFFF ;
  • border: 1px solid #DADADA ;
  • border-radius: 22px 22px 22px 22px ;
  • color: #333333 ;
  • content: "\00BB" ;
  • display: none ;
  • font-size: 30px ;
  • height: 28px ;
  • line-height: 26px ;
  • margin-top: -14px ;
  • position: absolute ;
  • right: 6px ;
  • text-align: center ;
  • text-indent: 1px ;
  • top: 50% ;
  • width: 28px ;
  • }
  •  
  • a.button:hover:after {
  • display: block ;
  • }
  •  
  • </style>
  • </head>
  • <body>
  •  
  • <h1>
  • CSS Pseudo Elements :before And :after
  • </h1>
  •  
  • <a href="#" class="button">
  • Button
  • </a>
  •  
  • </body>
  • </html>

According to the HTML markup, there's nothing but a button with the text, "Button." However, when you render the page, you can see the "NEW" tag:


 
 
 

 
 CSS pseudo elements, :before and :after. 
 
 
 

This "NEW" tag was supplied by the :before pseudo element. But, our CSS also has an :after pseudo element with an initial display of, "none;" This pseudo element is set to only show on :hover:


 
 
 

 
 CSS pseudo elements, :before and :after. 
 
 
 

Support for these CSS pseudo elements is IE8+, and basically every other browser. But, the nice thing about the pseudo elements is that they are intended primarily for design elements. This means that you can still gracefully degrade in IE<=7 using the same HTML and CSS. And, like I said, I've only just started using them in my current project; but, so far, they've made life so much easier!




Reader Comments

@Ben,

You know those websites that mark mandatory form fields with asterisk on the label? :before or :after is usually how they do it (hopefully with redundant styling for graceful degradation):

  • label.mand {/* font-weight:bold or whatever */}
  • label.mand:after {content: " *"}

Cool before it was cool, huh.

Reply to this Comment

@WebManWalking,

It's funny you mention that - when I was looking into the pseudo elements, the mandatory-field was one of the first examples I found.

Reply to this Comment

@Ben,

Speaking of CSS and mandatory fields, y'know what I wish you could say? :for(subselector). Example:

  • label:for(input[required],select[required],textarea[required]) {font-weight:bold}
  • label:for(input[required],select[required],textarea[required]):after {content: " *"}

Then all you'd have to do is add required. No parallel editing. Forms are such a big part of web development, it would be worth it, even if only label ever used it.

**sigh**

Reply to this Comment

@WebManWalking,

That would be cool. I think there is a :has() selector (or maybe that's only in jQuery). But, that requires a descendant relationship, which would probably not be true for a "label" element.

Reply to this Comment

Actually, though I'm guilty of doing it myself, I don't think using :before to add an asterisk to a required field is good usability. A screen reader won't be able to pick that asterisk up - unless they've changed recently to pick up CSS 'content' values.

Still, they're a great way to add design to markup without the quality of the code suffering. I like to add them as block elements with absolute positioning to get an image from my spriteset to appear behind or next to a link... or any number of similar implementations.

They're also great for adding text content that is useful only to visual users.

Reply to this Comment

@Ben - great post! I've been using pseudo selectors more frequently since IE6/7 usage has been falling among clients and they are indeed and massive time-saver and also a much more elegant way to add this kind of design feature.

@Gary - many screen readers are now adopting WAI-ARIA features so you could substitute the hard-coded asterisk for

  • aria-required="true"

on the form element itself. Even though the asterisk is a well-known convention, I prefer the use of attributes to denote this sort of thing, particularly when there's the risk of the label not being linked to that field via its "for" attribute.

Reply to this Comment

@Gary,

Yeah, I've been loving them for inserting icons (using sprites) without having to put in an extra (and empty) span/i/b tab in the markup.

Reply to this Comment

@Edward,

I just did a bit of Googling and it looks like CMD+Option+T brings up the Character Input thing for Mac OSX. I just did it, and it's not the easiest thing to use. But, for example, I just copied the "Much Greater Than" to my clipboard. Pasted:

?
MUCH GREATER-THAN
Unicode: U+226B, UTF-8: E2 89 AB

Interesting...

Reply to this Comment

It seems to me the "before" and "after" pseudo-selector names were poorly chosen, as they appear to "prepend" or "append" the content respectively. IOW, the injected content is inserted _within_ the element - not before or after the element. I found it a bit confusing at first, since what I observed was not what I expected (or what the names implied).

Reply to this Comment

@Steve,

Yeah, definitely a strangely named set of features. This was part of what confused me when I first started looking into them.

What's even stranger is that the "content" you are adding doesn't have a tag. So, how does this apply to standards? For example, can I add :before/:after to a OL or UL list? Technically, it probably works - *but*, should a list contain any children *other* than LI elements?

Of course, the :before/:after aren't "true" elements.

Now we have a philosophical debate :D

Reply to this Comment

@Maroun,

Awesome! Glad this could help. I have found these CSS techniques to be hugely helpful!!

Reply to this Comment

Hi Ben, thanks for the tutorial, this is very interesting for me to learn by a beginner like me, and some of these techniques already I apply to the theme of my blog, this post is really helpful for me to broaden my horizons in studying css, i hope can find another article that is related to the css, I really enjoyed this article, once again thank you, sorry if my english is not good ....

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.