Comment définir la largeur de: avant l'élément pseudo par rapport à l'élément contenant

Question

Je souhaite placer un cercle d'image sur des mots spécifiques.

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

avec

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

Ce qui fonctionne très bien. Mais avec une taille fixe.

Existe-t-il un moyen de définir la largeur du pseudo-élément par rapport à l'élément .Subjekt?

Answer 1

Utilisez le positionnement relative pour l'élément before par rapport à l'élément Subjekt.

Voir exemple ci-dessous:

1. Donnez relative position Subjekt.

2. Essayez de varier la width et height de Subjekt (Notez que je l'ai mis à inline-block aussi pour l'élément comme inline Elements- qui est l'affichage par défaut type- ne prendra pas la largeur ou la hauteur)

3. Définir height et width de l'élément before comme 100%. J'ai donné z-index: -1 à l'endroit before derrière.

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

espère que vous pouvez le faire avancer d'ici. Faites-moi savoir vos commentaires à ce sujet. Merci!