Front-end CSS - Joana Ferreira

gistfile1.html

<style>
  div {
    border: 1px solid black;
    width: 100px;
    height: 50px;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
  }

  div:nth-child(2n) {
    border: 1px dashed black; 
  }

  div:last-child:after {
    content: "";
    width: 100%;
    height: 50%;
    border: 1px dotted black;
    position: absolute;
    top: 100%;
  }
  
  /* o que acontece ao acrescentar a seguinte regra? */
  /*div { display: inline-block; } */
</style>
 
<div></div>
<div></div>
<div></div>
<div></div>

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