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

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元素。

参见下例：

1. 给relative位置Subjekt。

2. 尝试改变width和Subjekt（请注意，我已经将其设置为inline-block太为元素作为元素 - inline这是默认显示类型 - 不会采取的宽度或高度）

3. height将before元素的height和width设置为100％。

4. 我给了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; 
 
}

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

希望你能继续前进从这里开始。让我知道你对此的反馈。谢谢！