CSS: Insert Content Before or After Element

Insert content before an element

Use ::before to insert content before a HTML element

Example

How to do this?

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

Code

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

.x4013::before {
 color: red;
 font-family: serif;
 font-size: 3rem;
 content: "Q ";
}

Insert content after an element

Use ::after

code:before {
 content: "「";
}

code:after {
 content: "」";
}