How to Use CSS3 :before and :after Pseudo Elements

When you’re trying to work with HTML content that you are unable to edit (perhaps partially because of technical, work-related, or project-based), the only option to add other content without touching the HTML structure is to use the :before and :after pseudo-elements.

What Are Pseudo-Elements?

Now you’re probably wondering what pseudo-elements are or what they can do. Pseudo-elements create a “fake” element on top of another selected element. In this case, we are using the :before and :after pseudo-elements. They don’t actually change or add anything to the content. Instead, it creates a fake element either before or after the element itself which we can then use to style with.

Basic :before and :after Syntax

Here’s an example of the syntax:

[CSS]
.wrap:before {
content: “hello”;
}

.wrap:after {
content: “world”;
}
[/CSS]

As you can see, the content property has the value of “hello” and “world”. This will add the word ‘hello’ before each .wrap class element as well as adding ‘world’ after each of them.

Here’s another example on how to add an image before an element:

[CSS]
.wrap:before {
content: “”;
display: block;
width: 250px;
height: 250px;
background: url(“images/250×250.jpg”) no-repeat;
}
[/CSS]

The code is pretty self-explanatory. I am just creating a pseudo-element before my .wrap class div that is 250×250 pixels using a background image. You can also add an image like so:

[CSS]
.wrap:before {
content: url(images/250×250.jpg);
}
[/CSS]

You may have noticed that I didn’t include quotes inside the url() reference. That is because if I added quotes, it will interpret it as a literal string text.

Also, you may have noticed I used display: block property on the previous code. The reason for that is because it allows us to create that pseudo-element into an actual block element for us to style.

However, you must remember that pseudo-elements are not shown in the DOM, so you won’t be able to select or see it in the source like you normally can with HTML elements. Instead, you can use Firebug or Chrome’s Developer Tools to target the pseudo-element instead.

Furthermore, you must remember that these pseudo-elements inherit properties that can be inherited unless it is properties that aren’t naturally inherited… (that sounded confusing). What I’m saying is that if the main element that the pseudo-element is attached to (in this case the .wrap element) has a property of, say “font-size: 1.4em”, then the pseudo-element will also inherit it. Other properties such as margin or padding are not inherited.

Browser Support

As with most CSS3 techniques, only the more modern browsers are able to interpret the :before and :after pseudo-elements. With that being said, I would caution you to only use the :before and :after pseudo-elements as an enhancement and not a necessity when applying it to your designs. Anyways, here are the supported browsers:

  • Firefox 3.5+
  • Chrome 2+
  • Safari 1.3+
  • Opera 9.2+
  • IE8+
  • And all mobile browsers.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *