css - CSS边框不显示

Question

这是小提琴

我正在尝试将第一个设置<li>为具有与相邻元素的边框重叠的边框-当当前选择相应的菜单项时，这将用于隐藏边框的一部分（通过显示与深色重叠的白色边框） .

CSS：

.side-study-box .side-box-menu .nav-selected {
    /* Works, but I need it to overlap the black border on the right */
    border-right: 2px red inset;
    /* Does not show the border because it's hidden */
    border-right: 2px red; /* Works */
    z-index: 101;
}

这是我的代码：

<div class="viewport">
    <ul>
        <li> <a class="side-box-menu-control nav-text" data-bind="css: { 'nav-selected': true }"><i class="icon-pencil"></i></a>
        </li>
        <li> <a class="side-box-menu-control nav-picture"><i class="icon-picture"></i></a>
        </li>
        <li> <a class="side-box-menu-control nav-video"><i class="icon-facetime-video"></i></a>
        </li>
    </ul>
</div>

Answer 1

您可以尝试这样的事情（将border-type设置为solid）：

.side-study-box .side-box-menu .nav-selected {
    width: 22px;
    border-right: 3px red solid;
}

jsfiddle