::添加內容之前，而不是之前的元素

Question

我試圖讓「>」指向的鏈接，但使用：之前，它出現在某種原因的頂部。 我做錯了什麼？ 在此先感謝。

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

這是因爲display您a標籤設置爲block。您可以將其更改爲inline或inline-block或刪除顯示爲inline是錨的默認值，讓你正在尋找的結果：前

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

或

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

Answer 2

的::內容表現得像塊一樣。要做到你的要求，我想絕對定位::之前，像這樣：

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

而且，相對定位裏，讓::內容之前的位置相對於它，就像這樣：

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