CSS: insert content ::before ::after element

Insert content before an element

Use ::before to insert content before a HTML element

Example

How to do this?

This way.

Code

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

<p class="xaddA">This way.</p>

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

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

Insert content after an element

Use ::after

.xaddquote {
 &:before {
  font-family: serif;
  content: "“";
  font-size: 2rem;
  color: red;
 }
 &:after {
  font-family: serif;
  content: "”";
  font-size: 2rem;
  color: red;
 }
}

• CSS: nesting selector (ampersand &)