Do CSS rules exist for placing content within elements and positioning them?

Question

Do CSS rules exist for placing content such as images or text within elements?

eg. say I have a div which can contain some info which is correct and some info which is wrong, can I have rules such as:

.correct {
  img: greenTick.jpg;
  text: "answer is wrong"
}

.wrong {
  img: redX.jpg;
  text: "answer is correct"
}

Is it possible to position them too?

Answer 1

You can use pseudo elements (::before and ::after). Set the text using the content attribute, and the image as the background of the pseudo element or the div:

.correct::before {
  padding: 1em;
  background: url(https://picsum.photos/200/100);
  background-size: contain;
  color: white;
  content: "answer is correct"
}

.wrong::before {
  padding: 1em;
  background: url(https://picsum.photos/200/200);
  background-size: contain;
  color: white;
  content: "answer is wrong"
}

<div class="correct"></div>

<br><br>

<div class="wrong"></div>