:: vor dem Hinzufügen von Inhalt oben statt vor dem Element

Question

Ich versuche, den ">" Punkt zu den Links zu bekommen, aber mit dem: vor, es erscheint aus irgendeinem Grund oben. Mache ich etwas falsch? Vielen Dank im Voraus.

ul{ 
 
\t position: fixed; 
 
\t left: 1em; 
 
} 
 
li{ 
 
\t list-style: none; 
 
\t font-size: 1.3em; 
 
} 
 
li:before{ 
 
\t content: "> "; 
 
\t color: #333; 
 
} 
 
li:hover:before:{ 
 
\t color: hotpink; 
 
} 
 
a{ 
 
\t text-decoration: none; 
 
\t display: block; 
 
\t color: transparent; 
 
\t transition: all 0.5s ease; 
 
} 
 
a:hover{ 
 
\t transform: scale(1.1); 
 
\t color: hotpink; 
 
}

<ul class="menu"> 
 
\t <li><a href="#">Home</a></li> 
 
\t <li><a href="#">Favourites</a></li> 
 
\t <li><a href="#">Projects</a></li> 
 
\t <li><a href="#">Links</a></li> 
 
</ul>

Answer 1

Es ist, weil display für Ihre a Tags block gesetzt. Sie können dies auf inline oder inline-block ändern oder Anzeige entfernen als inline die Standardeinstellung für Anker ist, um die Ergebnisse zu erhalten, die Sie gesucht haben:

a{ 
    text-decoration: none; 
    display: inline; 
    color: transparent; 
    transition: all 0.5s ease; 
} 

oder

a{ 
    text-decoration: none; 
    color: transparent; 
    transition: all 0.5s ease; 
} 

Answer 2

The :: before Inhalt verhält sich wie ein Block. Zu tun, was Sie fragen, würde ich absolut die Position :: vor, wie folgt aus:

li:before{ 
    content: "> "; 
    color: #333; 
    **top: 0px; 
    left: -20px; 
    position: absolute;** 
} 

Und relativ die li positionieren, so dass die :: bevor Inhalt Positionen in Bezug auf sie, wie folgt aus:

li { 
    list-style: none; 
    font-size: 1.3em; 
    **position: relative;** 
}