CSS: “:before”, “:after”

By Xah Lee. Date: . Last updated: .

CSS :before and :after lets you add text or image into HTML content.

For example, a example use is for Question and Answers:

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.

Here's the CSS code:

p.x3465:before {
    content:"Q: ";

Here's the HTML code:

<p class="x3465">How to do this?</p>
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog