SO answer 12.10.14

http://stackoverflow.com/questions/26330505/child-div-needs-to-overlap-on-its-parent-such-that-it-gets-parents-background-c/26330547

HTML

<li>
    <div class="some_icon"> 
        <div class="another_icon">
        </div>
    </div>
    Lorem ipsum...
</li>

CSS

li {
    list-style: none;
    position: relative;
    height: 30px;
    border-left: 20px solid green;
    width: 90%;
    padding-left: 5px;
}

.some_icon {
    /* red square represents the icon */
    background: red;
    height: 20px;
    width: 20px;
    position: absolute;
    
    left: -20px;
}

.another_icon{
    position: absolute;
    height: 10px;
    width: 10px;
    top: 5px;
    left: 5px;
    background: yellow;
}