Question

在这个例子中，我需要将一个图像（或者有时一个单词）与一个句子中的两个单词联系起来，这样图像就会显示在这两个单词下面。这个例子来自语法教科书（瑞典语）。我唯一能做到的就是图像最终会覆盖文本。有没有人知道如何解决这个问题？

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属性，但此解决方案应该可以帮助您。

编辑：注意我将span类的位置设置为relative

.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>

如何仅使用CSS将图像（或文本）放在段落中的两个或更多单词下面？

1 个答案: