如何在絕對定位的元素上顯示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內容？

回答

相關問題