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

Question

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

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更改的情况下将文本放在前面？

P.S。我也不允许使用z-index T ^ T

JSFiddle Example

Answer 1

使用绝对定位元素时，请确保按Z轴索引属性沿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>