Html css-边框相互重叠

我有个问题。我的下边框与同一元素上的右边框“重叠”

这就是它的样子：

如您所见，由于底部的灰色边框，右下角的绿色边框看起来很混乱。我怎样才能解决这个问题

这是css：

.side-menu{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.side-menu li{
    border-bottom: 1px solid #E6E7E9;
    padding: 7px;
    padding-left: 0px !important;
    width: 192px;
}
.side-menu li.active{
    color: #CACDD0;
    border-right: 6px solid #2CC588;
    width: 199px;

} 

---

编辑：添加了JSFIDLE:

我假设

元素将有一个

，它显示了一个更好的工作示例。
试试这个：

.side-menu{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.side-menu li{
    border-bottom: 1px solid #E6E7E9;
    padding: 7px;
    padding-left: 0px !important;
    width: 192px;
}
.side-menu li.active {
    color: #a2a7ad;
    border-right: 6px solid #2CC588;
    width: 204px;
}

我只是改变了班级的宽度。“side menu li.active”并似乎有效。
您可以使用
：：after
伪元素来避免此类问题：

.side-menu li{
    line-height: 35px;
    padding-left: 18px !important;
    width: 210px;
    color: #37434f;
}
.side-menu li::after {
    content: ' ';
    display: block; 
    border-bottom: 1px solid #E6E7E9;    
}


请添加相应的html和css代码。我已经创建了一个JSFIDLE。请检查一下
.side-menu{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.side-menu li{
    border-bottom: 1px solid #E6E7E9;
    padding: 7px;
    padding-left: 0px !important;
    width: 192px;
}
.side-menu li.active {
    color: #a2a7ad;
    border-right: 6px solid #2CC588;
    width: 204px;
}

.side-menu li{
    line-height: 35px;
    padding-left: 18px !important;
    width: 210px;
    color: #37434f;
}
.side-menu li::after {
    content: ' ';
    display: block; 
    border-bottom: 1px solid #E6E7E9;    
}