Skip to main content
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with: Kev McCabe
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with: Kev McCabe ( @bigmadkev )

Using CSS Pseudo Elements :before And :after

By on
Tags:

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!

Want to use code from this post? Check out the license.

Reader Comments

290 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.

15,640 Comments

@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.

290 Comments

@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**

15,640 Comments

@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.

16 Comments

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.

1 Comments

@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.

15,640 Comments

@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.

15,640 Comments

@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...

1 Comments

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).

15,640 Comments

@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

2 Comments

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 ....

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel