Wie zeige ich den Inhalt von li über dem absolut positionierten Element an?

Question

Ich brauche li Element mit border-radius und Gradienten Grenze stylen, so dass es wie folgt aussehen:

Html: in

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

Problem ist, dass Text innerhalb von li nicht gewickelt alles und ich kann es nicht ändern. Ich verwende LESS, versuchte dabei:

.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; 
     } 
    } 

sieht gut aus, außer für den Text von Pseudoelement abgedeckt. Gibt es eine Möglichkeit, Text ohne HTML-Änderungen in den Vordergrund zu bringen?

P.S. Ich bin auch z-Index verwenden T^T

JSFiddle Example

Answer 1

Wenn Du mit absolut positionierten Elementen sicher seinen Platz dann in der richtigen Reihenfolge entlang der Z-Achse um z-index Eigenschaft nicht arbeiten dürfen.

Und wenn man mit absolut positionierten Elementen arbeitet sicher sein, alle Inhalte zu platzieren (d. Text usw.) innerhalb entsprechendem tagElement in Ihrem Fall Platz alle Etiketten innerhalb P-Tages.

Hier Code:

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>