UL-LI connected line style

CSS to transform ul into boxes connected with lines

HTML

<ul class="connected">
    <li>1</li>
    <li>2</li>
    <li>Overzicht</li>
</ul>

CSS

body * { font-family:sans-serif; }

/* ul.connected { 
    margin:1em 0; padding:0;     
} */
ul.connected li { 
    display:inline-block; 
    position:relative;
    margin:0; 
    padding:0.5em;
    background:#eee;
    border:#444 1px solid;  
}

ul.connected li:not(:last-child) {
  margin-right: 25px;
}

ul.connected li:not(:last-child):after {
  position: absolute;
  content: ' ';
  left: 100%;
  top: 0%;
  width: 2em;
  height: 1em;
  border-bottom: 1px solid black;
}