overlay with :after

by Bacher

HTML

<div class="container">
  <div>CONTENT</div>
  <div class="overlay"></div>
</div>

<br>
<br>

<div class="container container_overlay">
  <div>CONTENT</div>
</div>

CSS

.container {
  display: inline-block;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,0,0,0.2);
}

.container_overlay:after {  
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,0,0,0.2);
}