在一侧创建CSS内部边框

Question

如何在元素一侧的里面中产生边框效果？

我的目标是创建一个标记，指示垂直列表中当前选定的项目。例如在下面的模型中，选择第3项：

因为这是一个可更新的状态，我通过给li标记class="active"进行设置，所以我一直沿着::after伪元素的路径走下去

我得到的最接近的是：

ul li::after {
        background-color: #fbc123;
        content: "";
        float: right;
        height: 40px;
        position: absolute;
        width: 5px; }

这仍然是40px-by-40px盒子外面的亮点。我怎样才能将它移动到右边5个像素？

我创建了一个jsFiddle，但它的行为与我在实际代码中看到的不同。在jsFiddle中，黄色线条保留在左侧，而不是右侧对齐。

http://jsfiddle.net/EvilClosetMonkey/m8A3e/

如何仅在右侧创建5px边框的效果？

Answer 1

这就是你要追求的吗？

http://jsfiddle.net/m8A3e/1/

首先，我删除了浮动因为浮动和position: absolute;不能一起使用。然后我给了li相对定位并给了标记正确的顶部/右侧位置。

Answer 2

我认为您可以尝试使用border-right，为内部直接子项设置relative位置，然后使用z-index将其发送到后面：

ul > li.active {
  border-right:5px solid yellow;
  box-sizing:border-box;
}
ul > li.active > * {
  position:relative;
  z-index:-3;
}

根本不需要使用伪元素。这是working demo.

仔细观察上面的演示，右边框似乎在结尾处有点锯齿（因为顶部和左边的边框）。您可以尝试使用插入box-shadow代替更好的结果：

ul > li.active {        
  box-shadow:-5px 0 yellow inset;
}

Updated demo

注意：如果您有一些内联元素（如a元素）作为最直接的子元素（并填充父空间），则应设置样式display:block对于该元素，否则在应用样式position:relative后似乎会隐藏它。