CSS 是否存在用于在元素中放置内容和定位它们的规则？

Question

在元素中放置图像或文本等内容是否存在 CSS 规则？

例如。假设我有一个 div 可以包含一些正确的信息和一些错误的信息，我可以有这样的规则：

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

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

也可以定位吗？

Answer 1

CSS background-image 属性将是您需要使用的属性 img。请参阅下面的示例，了解如何使用两种样式类:

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

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

Answer 2

可以使用伪元素的pseudo elements (::before and ::after). Set the text using the content attribute, and the image as the background或者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>

CSS 是否存在用于在元素中放置内容和定位它们的规则？

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

css

background-image

styling

css-content