如何在绝对定位元素之上显示 li 内容？

Question

我需要使用border-radius 和渐变边框来设置li 元素的样式，这样它就会看起来像这样：

HTML：

<li class="myTab">
Hello World!
</li>

问题是li 中的文本没有包含在任何内容中，我无法更改它。我正在使用LESS，尝试过：

.TAB() {
        #gradient > .linear(top; #655724 0%, #d0704c 50%, #b24e31 100%);
        border-radius: 15px;
        position: relative;

        &::before{
            content: '';
            position: absolute;
            width: ~'calc(100% - 4px)';
            height: ~'calc(100% - 4px)';
            #gradient > .radialEllipse(center; closest-corner; #b4812a 0%, #374e0a 100%);
            border-radius: 14px;
        }
    }

看起来不错，除了文本被伪元素覆盖。有什么方法可以在不更改html的情况下将文本放在前面？

附注我也不允许使用 z-index T^T

JSFiddle Example

Answer 1

当您使用绝对定位的元素时，请确保通过 z-index 属性沿 Z 轴以正确的顺序放置。

当您使用绝对定位的元素时，请务必将所有内容（即文本等）放在适当的 tagElement 中，在您的情况下将所有标签放在 P 标记中。

代码如下：

body{
  background: #6b7023;
}
ul{
  display: flex;
  flex-direction: row;
}
.myTab{
  list-style: none;
  color: white;
  background: linear-gradient(to bottom, #655724 0%, #d0704c 50%, #b24e31 100%);
	border-radius: 15px;
	position: relative;
  min-width: 100px;
  height: 60px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-right: 10px;
}
.myTab::before{
  content: '';
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	background-image: radial-gradient(ellipse closest-corner at center, #b4812a 0%, #374e0a 100%);
	border-radius: 14px;
  z-index:9;
}
.myTab p {
  z-index:10;
}

<ul>
<li class="myTab"><p>1st tab</p></li>
<li class="myTab"><p>2nd tab</p></li>
<li class="myTab"><p>3rd tab</p></li>
</ul>