How to define width of :before pseudo element relative to containing element
<p>I want to place an image circle on specific words.</p>

<pre><code>&lt;p&gt;
   &lt;span class="Subjekt"&gt;Vater&lt;/span&gt;
   &lt;span class="Praedikat"&gt;bringt&lt;/span&gt;
&lt;/p&gt;
</code></pre>

<p>with</p>

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

<p>Which works fine. But with a fixed size.</p>

<p>Is there a way to define the width of the pseudo element relative to the .Subjekt element?</p>