含まれる要素に対する相対的な擬似要素の幅を定義する方法

Question

特定の単語に画像の円を配置したい。正常に動作します

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

と

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

。しかし、固定サイズです。

擬似要素の幅を.Subjekt要素に対して相対的に定義する方法はありますか？

Answer 1

要素の位置は、Subjekt要素に対してrelativeです。

以下の例を参照してください：

1. はSubjektためrelative位置を与えます。

2. widthとSubjekt

3. （私はあまりにもデフォルトの表示タイプ - 幅または高さになりませんですinline elements-などの要素のためにinline-blockにそれを設定していることに注意してください）の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>

あなたはここから前方にそれを取ることができます願っています。これに関するあなたのご意見をお聞かせください。ありがとう！