perfectly-justified-css-grid-technique-using-inline-block

perfectly-justified-css-grid-technique-using-inline-block.css

.wrapper{
  width: 550px;
  text-align: justify;
  background: firebrick;
  font-size: 0;
  font-size: 12px\9; /* IE6-9 only hack */
}

.wrapper div{
  background: white;
  display: inline-block;
  font-size: 12px;

  zoom: 1;
  *display: inline;
}

.wrapper:after{
  content: "";
  width: 100%;
  display: inline-block;

  zoom: 1;
  *display: inline;
}

I love this technique... It would be even more neat if there was a way to achieve clicking through to content below the pseudo-element... I tried setting CSS rules for the :after element as height: 0;, and/or max-height: 0;, and also visibility: none... I wonder if there's a way to hack it somehow? It's not being overridden by anything else in my CSS either

If you put pointer-event: none; on the :after pseudo-element it should prevent the pseudo-element from interfering with anything below.