title: calculated width for an absolute position
body: <p>I am trying to give my <strong>:after</strong> a calculated width using <code>calc(100%-4px)</code> but since it is <code>position:absolute</code> this is not working.</p>
  
  <p><a href="https://jsfiddle.net/u86zy0fh/" rel="nofollow noreferrer">JSfiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>article {
    background: linear-gradient(135deg, #FF9800, rgba(255, 235, 59, .91) 87%), url(http://ably.ir/Uploads/SQL%20Server/SQL-Server-Integration-Services-SSIS-Tutorial.jpg);
    background-position: center center;
    color: #263238;
    height: 150px;
    width: 400px;
    position: relative;
  }
  
  article:after {
    content: "";
    width: calc(100%-4px);
    height: calc(100%-4px);
    background: #263238;
    position: absolute;
    left: 2px;
    top: 2px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article class="col-md-12"&gt;
    &lt;h2&gt;something&lt;/h2&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://fiddle.jshell.net/u86zy0fh/1/show/" rel="nofollow noreferrer">this is what i want</a> </p>