Блог

Я хочу поместить круг изображения на определенные слова.

 <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:"";
}
  

Который работает нормально. Но с фиксированным размером.

Есть ли способ определить ширину псевдоэлемента относительно элемента .Subject?

Используйте relative позиционирование для before элемента относительно Subjekt элемента.

Смотрите пример ниже:

1. Укажите relative позицию для Subjekt .

2. Попробуйте изменить width и height Subjekt (обратите внимание, что я установил для него значение inline-block too для элемента, поскольку 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>  

Надеюсь, вы сможете продолжить его отсюда. Дайте мне знать ваши отзывы по этому поводу. Спасибо!