css - 创建一个可滚动列表，其中覆盖了所选元素的右边框

Question

我正在尝试设置具有以下效果的列表样式:

我可以使用 :after 实现这一点，但前提是列表的 overflow-y 属性未设置为 scroll 或 auto(这会导致 overflow-x 也变为 auto，参见 this SO 答案)。如果我将 :after 元素的位置设置为绝对位置，它将不会随列表滚动。

知道如何在滚动列表中获得这种效果吗？

谢谢

Answer 1

一个简单的解决方法是为容器使用 box-shadow 属性。这样，元素会自动覆盖它，而如果容器为空，它就会可见。

box-shadow: inset -1px 0 0 0 #C4CAD2;

这是一个 fiddle :http://jsfiddle.net/m93uzktj/

顺便请注意，放置在容器右侧的滚动条会隐藏效果。