Существуют ли правила CSS для размещения контента внутри элементов и их позиционирования?

Question

Существуют ли правила CSS для размещения содержимого, такого как изображения или текст, внутри элементов?

например.скажем, у меня есть div, который может содержать некоторую информацию, которая является правильной, и некоторую информацию, которая является неправильной, могу ли я иметь такие правила, как:

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

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

Можно ли их тоже позиционировать?

Answer 1

Можно использовать псевдоэлементы (::before и ::after).Установите текст, используя атрибут content, а изображение в качестве фона псевдоэлемента или 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>

Answer 2

CSS background-image атрибут будет тот, который вам нужно использовать вместо img.Ниже приведен пример того, как сделать это с вашими классами стилей:

.correct {
    background-image: url("greenTick.jpg");
}

.wrong {
    background-image: url("redX.jpg");
}