MathCurvesSurfacesWallpaper GroupsGallerySoftwarePOV-Ray
ProgramingLinuxPerl PythonHTMLCSSJavaScriptPHPJavaEmacsUnicode ♥
Web Hosting by 1&1

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

Xah Lee, ,

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>
blog comments powered by Disqus