Wie setze ich ein css-Dreieck vor einer Spanne

Question

Ich versuche ein css-Dreieck vor meine Spannweite zu setzen und aus irgendeinem Grund taucht überhaupt nichts auf, irgendeine Ahnung, was ist los?

.triangle:before { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 3px solid transparent; 
 
    border-right: 6px solid green; 
 
    border-bottom: 3px solid transparent; 
 
    right: 100%; 
 
    top: 0%; 
 
    position: absolute; 
 
    clear: both; 
 
} 
 

 
.triangle { 
 
    position: relative; 
 
}

<span class="triangle">Hi</span>

Answer 1

Sie haben vergessen

content : ''; 

in Ihrem css

.triangle::before{ 
    content:''; 
    width: 0; 
    height: 0; 
    border-top: 3px solid transparent; 
    border-right: 6px solid green; 
    border-bottom: 3px solid transparent; 
    right:100%; 
    top:0%; 
    position: absolute; 
    clear: both; 
} 

Answer 2

Ihre Spannweite class nicht className verwenden muss, und Sie müssen content:'' auf Ihre vor CSS hinzufügen :

.triangle::before{ 
 
    content:''; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 3px solid transparent; 
 
    border-right: 6px solid green; 
 
    border-bottom: 3px solid transparent; 
 
    right:100%; 
 
    top:0%; 
 
    position: absolute; 
 
    clear: both; 
 
} 
 
.triangle{ 
 
    position: relative; 
 
}

<span class="triangle">Hi</span>

Answer 3

Sie haben vergessen content:'' in Ihrem CSS passieren, überprüfen aktualisiert Schnipsel unten:

.triangle::before{ 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 3px solid transparent; 
 
    border-right: 6px solid green; 
 
    border-bottom: 3px solid transparent; 
 
    right:100%; 
 
    top:7px; 
 
    position: absolute; 
 
} 
 
.triangle{ 
 
    position: relative; 
 
    display: inline-block; 
 
}

<span class="triangle">HI</span>