Question

我试图获得＆＃34;＆gt;＆＃34;指向链接，但使用：之前，由于某种原因它出现在顶部。难道我做错了什么？提前谢谢。

＆＃13;

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

＆＃13;

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

＆＃13;

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，以便::之前的内容位置相对于它，如下所示：

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

::在顶部而不是元素之前添加内容之前

2 个答案: