calculated width for an absolute position

Question

I am trying to give my :after a calculated width using calc(100%-4px) but since it is position:absolute this is not working.

JSfiddle

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;
}

<article class="col-md-12">
  <h2>something</h2>
</article>

this is what i want

Answer 1

Alternate solution to have left/right and top/bottom size 2px less than the parent size is to use right: 2px and bottom: 2px to your absolute position element:

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; right:2px;
  top: 2px; bottom:2px;
}

<article class="col-md-12">
  <h2>something</h2>
</article>

This has better performance (as its not required to recalculate properties on special events) and better browser support

Answer 2

you didn't write it correctly you need to add spaces between the operator "-"

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;
}

<article class="col-md-12">
  <h2>something</h2>
</article>