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

我需要的款式li元素与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更改的情况下在前面添加文本？

P.S.我也不许用z-index属性使用z-index的T^T

JSFiddle Example

来源

2017-06-21 Alyona

-1

当您使用绝对定位元素的工作务必到位，然后按照正确的顺序沿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%); 
 
\t border-radius: 15px; 
 
\t position: relative; 
 
    min-width: 100px; 
 
    height: 60px; 
 
    align-items: center; 
 
    justify-content: center; 
 
    display: flex; 
 
    margin-right: 10px; 
 
} 
 
.myTab::before{ 
 
    content: ''; 
 
\t position: absolute; 
 
\t width: calc(100% - 4px); 
 
\t height: calc(100% - 4px); 
 
\t background-image: radial-gradient(ellipse closest-corner at center, #b4812a 0%, #374e0a 100%); 
 
\t 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>

来源

2017-06-21 16:10:25

的OP不能改变HTML或使用'的z index'。你的答案确实**都**。 –

对不起。试试这个.myTab ::之后{ 内容：'1st tab'; \t position：absolute; }并将其放在代码后面..myTab :: before {...} –

这也行不通，因为列表正在由javascript填充，并且也无法更改。 – Alyona

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

回答

相关问题