CSS overlapping border of parent element, negative margin - html

Question

I have nested elements, the container has a border style of one sort and I want some of the elements inside it to have their own border overlapping the container's border. I tried using negative margin, but the border of the child is hidden underneath the parent's (seems to be overflow issue).
HTML:
<div class="right">
<div class="itemlist">
<ol>
<li>Abc</li>
<li class="special">Abc</li>
<li>Abc</li>
<li>Abc</li>
<li class="special">Abc</li>
<li>Abc</li>
<li>Abc</li>
</ol>
</div>
</div>
CSS:
.right {
position: fixed;
right: 0;
top: 0;
width: 200px;
height: 100%;
z-index: 100;
display: flex;
flex-direction: column;
border-left: 3px solid #76ff03;
}
.right .itemlist {
flex: 1;
overflow-y: auto;
}
.itemlist > ol > li {
border-bottom: 1px solid #76ff03;
padding-left: 20px;
}
.itemlist > ol > li:hover, .itemlist > ol > li.special {
border-left: 10px solid #2196f3;
border-bottom: 1px solid #2196f3;
margin-left: -3px;
}
I've seen some examples of this done and can make it work in some cases, but not consistently. I have an example JSFiddle with some layout, below is a picture of whet two of the list elements look like and what I want them to look like.
http://jsfiddle.net/jkondratowicz/e6uunLa4/1/

Answer 1

Here is a way to do it removing the margin on it's parent container and adding it to each row individually
.right {
position: fixed;
right: 0;
top: 0;
width: 200px;
background: #78909c;
height: 100%;
z-index: 100;
display: flex;
flex-direction: column;
}
.itemlist > ol > li {
border-bottom: 1px solid #76ff03;
border-left: 3px solid #76ff03;
padding-left: 20px;
}
Here are the styles you need using box-shadow
.itemlist > ol > li {
box-shadow: inset 3px -1px 0px 0px #76ff03;
padding-left: 20px;
}
.right .itemlist {
flex: 1;
overflow-y: auto;
box-shadow: inset 3px 0px 0px 0px #76ff03;
}
.itemlist > ol > li:hover, .itemlist > ol > li.special {
box-shadow: inset 10px -1px 0px 0px #2196f3;
padding-left: 25px;
}
.right {
position: fixed;
right: 0;
top: 0;
width: 200px;
background: #78909c;
height: 100%;
z-index: 100;
display: flex;
flex-direction: column;
}
http://jsfiddle.net/xnjn17uL/2/