Front-end CSS João Monteiro

gistfile1.html

<style>
  .row > div { height: 100px; width: 100px; border: 1px solid black; }

  div:not(.row) { display: inline-block; }

  .row > div:before {
    content: "";
    display: block;
    height: 50px;
    width: 50px;
    border: 1px dashed black;
    position: relative;
    top: 25px;
    left: 25px;
  }
  
  /* o que acontece ao acrescentar a seguinte regra? */
  /* .row > div:before { position: absolute; } */
</style>
 
<div class="row">
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
</div>

Resultados em https://jsfiddle.net/miguelgazela/xnt9fx0g/2/