Верстка блоков с помощью :after

by InviS

HTML

<div class='row'>
    <div class='item'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
    <div class='item'>123</div>
    <div class='item'>123</div>
</div>

CSS

.row{
    float: left;
    position: relative;
}
.item{
    margin-left: 20px;
    float: left;
    vertical-align: top;
    width: 100px;
}
.item:after{
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    height: 100%;
    width: 100px;
    background-color: yellow;
    z-index: -1;
}
.item+.item:after{left: 140px;}
.item+.item+.item:after{left: 260px;}