Perm url with updates: http://xahlee.org/js/css_before_after.html

CSS Example: How to use “:before” and “:after” pseudo-elements

Xah Lee, 2009-01, 2010-08-07

This page shows you how use css to add text into your html pages, using the “:before” and “:after” pseudo-elements.

You can use CSS to automatically insert text or images into your html page at certain tags. For example, in the following:

How to do this?

This way.

The “Q:” and “A:” are actually not in html. They are added using CSS. If you turn off CSS in your browser, they'll disappear.

To add text before or after a tag, use this:

p.x3465:before {content:"Q: ";font-size:x-large;font-family:serif}

and the html would look like this:

<p class="x3465">How to do this?</p>