gpt4 book ai didi

html - 如何在伪元素中使用 z-index

转载 作者:行者123 更新时间:2023-11-28 00:33:42 27 4
gpt4 key购买 nike

如何让黄线后面的白线盖住黑线?我尝试将 z-index: -1; 添加到“白线”,但它被所有元素覆盖。

而且我不想更改 .outterz-index。因为还有其他元素,例如输入或按钮。如果我将 z-index 更改为 -1,则 .outter 中的所有元素都无法使用。

下面是我的代码:

li {
position: relative;
list-style: none;
}

.outter {
background-color: black;
}

.inner {
background-color: yellow;
}

.inner:before {
content: '';
position: absolute;
top: 50%;
left: -4em;
width: 12em;
height: 0.2em;
background: white;
}
<html>

<body>
<div class="outter">
<ul>
<li>
<div class="inner">test</div>
</li>
</ul>
<button>button</button>
</div>
</body>

</html>

最佳答案

 li{
position: relative;
list-style: none;
}
.outter{
background-color: black;
}
.inner{
position: relative;
background-color: yellow;
z-index: 0;
}
li::before{
content: '';
position: absolute;
top: 50%;
left: -4em;
width: 12em;
height: 0.2em;
background: white;
}
 <html>
<body>
<div class="outter">
<ul>
<li>
<div class="inner">test</div>
</li>
</ul>
<button>button</button>
</div>
</body>
</html>

关于html - 如何在伪元素中使用 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57585439/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com