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?

The “Q” is not in HTML. They are added by CSS. If you turn off CSS in your browser, they'll disappear.

Here's the HTML code:

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

Here's the CSS code:

p.q15492:before {
content:"Q ";
font-size:1.5rem;
}
JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc