CSS: Insert Content ::Before, ::After

By Xah Lee. Date: . Last updated: .

The ::before CSS Pseudo Element let you insert content into a HTML element .

Similarly for ::after .

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

How to do this?

The “Q” is not in HTML. It is added by CSS.

Here is the HTML code:

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

Here is the CSS code:

p.q15492:before {
content:"Q ";
font-size:40px;
}

CSS: Pseudo-Elements

CSS

Basics

Selectors

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc