Css 使用：before伪元素突出显示列表项（z索引问题）

我有一个项目列表（由JSTree生成）。我想通过：before伪元素突出显示一个项目的整行内容，该元素在不同的HTML结构中已经对我起作用了。现在，对于生成的一个，z索引将出现混乱。类之前为的项的z索引目前为-1。如果我把它改为1，它会出现在所有链接的前面，但它应该是背景。无论我选择什么值，我都无法使突出显示显示显示在背景前面，而是显示在链接后面

以下是html代码的一部分：

<div id="jlayout_west_center" class="center" style="width: 300px; height: 897px; left: 0px; top: 0px; position: absolute;">
    <div id="jlayout_west_center_content" class="jlayout-panelContent jstree jstree-0 jstree-custom jstree-focused" style="width: 100%; height: 100%;">
        <ul class="jstree-no-dots jstree-no-icons">
            <li class="jstree-last jstree-open"><ins class="jstree-icon jstree-ocl">&nbsp;</ins><a href="javascript:void(0);"><ins class="jstree-icon jstree-themeicon">&nbsp;</ins>Root</a>

                <ul style="">
                    <li class="jstree-open"><ins class="jstree-icon jstree-ocl">&nbsp;</ins><a href="javascript:void(0);" class=""><ins class="jstree-icon jstree-themeicon">&nbsp;</ins>Category1</a>

                        <ul style="">
                            <li class="jstree-leaf"><ins class="jstree-icon jstree-ocl">&nbsp;</ins><a href="javascript:void(0);"><ins class="jstree-icon jstree-themeicon">&nbsp;</ins>Item 1</a>

                            </li>
                            [...]
                        </ul>
                    </li>
                    <li class="jstree-last jstree-closed"><ins class="jstree-icon jstree-ocl">&nbsp;</ins><a href="javascript:void(0);" class=""><ins class="jstree-icon jstree-themeicon">&nbsp;</ins>Category 2</a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

还有一个JSFIDLE，将所有这些放在一起，可以重现问题：

---

请参见第2项它有jstree clicked类，应该以突出显示的背景显示。

更新：为整行修改

您需要添加两行代码：

.jstree-custom {
    position: relative; /* add this */
    z-index: 1; /* add this */
}

---

谢谢你的回答，但我需要突出显示完整的线条（从灰色背景的左侧到灰色背景的右侧），无论

的级别如何。@Chris：没问题。将代码进一步向上移动。我已经更新了答案和提琴示例。

.jstree-custom {
    position: relative; /* add this */
    z-index: 1; /* add this */
}