如何在绝对定位的元素上显示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
答
当您使用绝对定位元素的工作务必到位,然后按照正确的顺序沿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>
的OP不能改变HTML或使用'的z index'。你的答案确实**都**。 –
对不起。试试这个.myTab ::之后{ 内容:'1st tab'; \t position:absolute; }并将其放在代码后面..myTab :: before {...} –
这也行不通,因为列表正在由javascript填充,并且也无法更改。 – Alyona