::要素の前ではなく上にコンテンツを追加する前

Question

私はリンクに ">"ポイントを取得しようとしていますが、：beforeを使用すると何らかの理由で上に表示されます。 何か間違っていますか？ ありがとうございます。

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

ごaタグのdisplayがblockに設定されているからです。前

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

::：inlineはアンカーのデフォルトであるとして、あなたが探していた結果を得るために、inlineまたはinline-blockに変更、または表示を削除することができますコンテンツはブロックのように動作しています。

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

そして、比較的リーを置き、そのよう::それに対するコンテンツの位置の前に、このような：あなたが求めているものを、私は絶対に位置づけるだろう::前に、次のように操作を行うために、

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