Question

我想在特定字词上放置一个图像圈。

<p>
   <span class="Subjekt">Vater</span>
   <span class="Praedikat">bringt</span>
</p>

与

.Subjekt:before {
    position: absolute;
    background-image: url(images/markup/einkreisen1.png);
    background-size: 100% 100%;
    display: inline-block;
    margin-left: -20px;
    width: 100px; 
    height: 50px;
    content:"";
}

哪个工作正常。但是有一个固定的大小。

有没有办法定义相对于.Subjekt元素的伪元素的宽度？

Answer 1

对relative元素before元素使用Subjekt定位。

见下面的例子：

为relative提供Subjekt位置。
尝试更改width的{{1}}和height（请注意，我已将该元素设置为Subjekt，因为inline-block元素 - 这是默认的显示类型 - 不会占用宽度或高度）
将inline元素的height和width设为100％。
我将before放到z-index: -1后面的地方。

before

.Subjekt {
    position: relative;
    width: 200px;
    height: 200px;
    display: inline-block;
}
.Subjekt:before {
    position: absolute;
    background-image: url(http://placehold.it/100x100);
    background-size: 100% 100%;
    display: inline-block;
    width: 100%; 
    height: 100%;
    content:"";
    z-index: -1;
}

希望你能从这里开始。请告诉我您对此的反馈。谢谢！

如何定义宽度：在伪元素之前相对于包含元素

1 个答案: