CSS边框穿透问题：如何让边框仅在point-count div内终止

问题原因 #

原CSS中.point-count:before伪元素采用绝对定位，但未给父元素.point-count设置相对定位，导致伪元素的高度参考了更高层级的父元素（而非自身）；同时height:100%搭配top:30px的设置，让边框超出.point-count范围穿透到表格区域。另外.point-count:last-child:before无效，是因为.point-count并非其父元素的最后一个子元素（内部包含表格等元素），该选择器无法匹配目标元素。

修复方案 #

1. 给.point-count添加相对定位，让伪元素的定位基准变为自身：

.point-count {
    position: relative;
}

2. 调整伪元素的高度计算方式，确保边框在.point-count内部终止：

.point-count:before {
    content: '';
    position: absolute;
    border-bottom: none;
    left: 48px;
    border-left: solid 4px #F3F3F3;
    /* 用calc抵消top的30px，让边框从top位置延伸到元素底部 */
    height: calc(100% - 30px);
    top: 30px;
}

补充：隐藏最后一个元素的边框 #

若需要隐藏最后一个.point-count的左侧边框，需精准定位到父容器的最后一个.point-count元素，使用以下选择器：

.ott-col-right-inner:last-of-type .point-count:before {
    border-left: none;
}

内容的提问来源于stack exchange，提问作者J Can