css

calculated width for an absolute position

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

Solution

  • 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>