title: How to Inherit non-overriden css pseudo-properties from the pseudo css classes
body: <p>I have a css pseudo class. i want to add some more properties in the same pseudo class only for few elements.
  eg:</p>
  <pre><code>&lt;button class=&quot;left outline&quot;&gt;
  &lt;/button&gt;
  </code></pre>
  <pre><code>.left{
     ...
     ...
     &amp;:after{
       content: url(&quot;img...&quot;),
     }
  
     &amp;:before{
       ...
       ...
     }
  }
  </code></pre>
  <pre><code>.outline {
     ...
     ...
     &amp;:after {
       content: &quot;&quot;,
       outline-width: 2px;
       outline-style: solid;
       outline-color: $outlineColor;
       outline-offset: $outlineOffset;
     }
  }
  </code></pre>
  <p>In the above snippet, i don't want the .outline:after to only override the .left:after instead i want to inherit and override the props. Basically what i mean is, I want the image as well as the outline on the same element using pseudo class.</p>
  <p>Can any one help me out on this?</p>
  <p>Thanks in advance</p>