Add width to element with css
<p>I have a bunch of classes, here are 3 as example:</p>

<pre><code>.col-1-3{
    width:calc(100%/(3/1));
}
.col-2-3{
    width:calc(100%/(3/2));
}
.col-1{
    width:100%;
}
</code></pre>

<p>(all of these are inline-block and position relative if that info might be useful....)</p>

<p>Now, if an element with any of those classes applied, also have another class applied, lets call it 'batman', I need the element to grow 30px in width.</p>

<p>Without touching each and everyone of my .col-* classes and in there add the 30px, is there any! other way to add to an elements width? see example pseudo code:</p>

<pre><code>.batman{
    add-to-width:30px;
}
</code></pre>

<p>I was thinking perhaps with :before and/or :after. Adding a pseudo element and somehow move it 15px to the left/right and the main element would follow/grow...but it didnt work....</p>

<p>requirement: strictly css, no javascript please.</p>

<p>Any idea?</p>

<p>thanks in advance!! :)</p>