CSS 伪类在IE8中样式无法生效

Question

写了一个纯CSS的竖版流程样式，效果如下

<ol class="case-state">
        <li>起始</li>
        <li>1</li>
        <li>2</li>
        <li class="end">结束</li>
</ol>

使用：before生成左侧圆，首尾两头的li用：after生成竖条，其余都用border-left填补。
伪类绝对定位，首尾li ：before做了位置微调。
但在IE8中出现了首尾li的:before失效情况（中间li则正常）

几次调整css不见成效.....css代码，比较丑....

.case-state>li{
    position: relative;
    display: block;
    height: 40px;
    line-height: 40px;
    color: #b4e7bf;
    font-size: 14px;
    padding-left: 10px;
    border-left: 5px solid #82d694; 
}
.case-state>li:before
{
    content: "";
    position: absolute;
    left: -7px;
    top: 16px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    color: #82d694;
    border: 2px solid #fff;    
    z-index: 2;
}
.case-state>li:first-child:before,
.case-state .ing:before,
.case-state .end:before
{
    left: -2px;
}
.case-state>li:first-child:after{
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    height: 35px;
    width: 5px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #82d694;
}
.case-state .ing,
.case-state>li:first-child,
.case-state .end{
    border: 0;
    padding-left: 15px;
}
.case-state .ing:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 35px;
    width: 5px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background: #82d694;
}
.case-state .end:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 23px;
    background: #82d694;
}
.case-detail table{
    font-size: 22px;
    line-height: 50px;
    color: #506173;
}
.case-detail tr>td:first-child{
    font-size: 18px;
    color: #8c9cad;
}
.case-detail .tr-top td:first-child {
    padding-top: 5px;
}

Answer 1

今天也遇到类似问题，貌似是IE8对伪元素支持不是很好，当超出父元素范围会被减载掉，只能用真正的html元素来实现

Answer 2

ie8不支持border-radius