alireza alireza - 9 months ago 32
CSS Question

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

Answer Source

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>