html - 如何仅使用 CSS 将图像(或文本)放在段落中两个或多个单词的下方？

Question

在这个例子中，我需要将一个图像(有时是一个词)与句子中的两个词结合起来，以便图像显示在这两个词的下方。这个例子来自一本语法教科书(瑞典语)。我用这个完成的唯一一件事是图像最终覆盖了文本。有谁知道如何解决这个问题？

Example from printed textbook

HTML:

<p><strong>Verb</strong>: <em>Mamma <span class="pilvIMG">log <u>brett</u></span>.</em></p>
<p><strong>Adjektiv</strong>: <em>Hon var <span class="pilhIMG"><u>mycket</u> glad</span>!</em></p>
<p><strong>Andra adverb</strong>: <em>Sven sprang <span class="pilhIMG"><u>otroligt</u> snabbt</span>.</em></p>

CSS:

.pilvIMG {
background-image: url(pilv.png);
background-repeat: no-repeat;
display: inline-block;
}
.pilhIMG {
background-image: url(pilh.png);
background-repeat: no-repeat;
display: inline-block;
}

Answer 1

您可以使用before伪元素。 在下面的当前代码中，我使用了 content 属性来向您展示它的定位方式，但您也可以使用 background-image 作为伪元素。

尽管您仍需要定义内容，但只需将其留空即可，如 content: "";

并且您可能想要调整 top 和 left 属性，但此解决方案应该可以帮助您。

编辑:注意我将跨度类的位置设置为相对

.pilvIMG,.pilhIMG{
  position:relative;
}

.pilvIMG:before{
  content: "->";
  position:absolute;
  left: 10px;
  top: 10px;
}

.pilhIMG:before{
 content: "<-";
 position:absolute;
 left: 10px;
 top:10px;
}

<p><strong>Verb</strong>: <em>Mamma <span class="pilvIMG">log <u>brett</u></span>.</em></p>
<p><strong>Adjektiv</strong>: <em>Hon var <span class="pilhIMG"><u>mycket</u> glad</span>!</em></p>
<p><strong>Andra adverb</strong>: <em>Sven sprang <span class="pilhIMG"><u>otroligt</u> snabbt</span>.</em></p>