Как определить ширину: перед псевдоэлементом относительно содержащего элемента

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 и height из Subjekt (Заметьте, что я поставил его inline-block тоже для элемента как inline элементы-, который по умолчанию дисплей -Тип не будет принимать ширину или высоту)

3. Установите height и width элемента before как 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>

Надеется, что вы можете взять его вперед отсюда. Позвольте мне знать ваши отзывы об этом. Благодаря!