1
我的代碼中的問題是它不旋轉：before（{）和：after（}）元素。
它僅旋轉，如果我對他們設置position: absolute，擾亂自己的位置，使得它難以帶來回到所需位置爲什麼轉換/轉換不工作：之前和之後
有人能解釋爲什麼發生這種情況？
更新：此代碼在Chrome和IE 11中工作正常，但不是Firefox。用Firefox上述問題
/* you should start reading from here..... */
a:before{
opacity: 0;
content: '{';
font-size: 40px;
line-height: 1;
transition: opacity 0.3s, transform 0.4s;
}
a:after{
opacity: 0;
content: '}';
font-size: 40px;
line-height: 1;
transition: opacity 0.3s, transform 0.4s;
}
a:hover:after{
opacity: 1;
transform: rotateX(1turn);
}
a:hover:before{
opacity: 1;
transform: rotateX(1turn);
}
/* no need to read after this */
a{
text-decoration: none;
color: black;
transition: color 0.3s;
position: relative;
}
a:hover{
color: red;
}
body{
margin: 0;
padding: 0;
font-size: 25px;
color: black;
font-weight: 700;
line-height: 1;
}
.nav{
display: block;
margin: 100px auto;
width: 80%;
text-align: center;
}
ul{
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
li{
float: left;
margin: 0 20px;
padding: 15px 10px;
}
li a{
margin: 0;
padding: 0;
}
ul:after{
content: '';
display: table;
clear: both;
}<div class="nav">
<ul>
<li><a href="">HELLO</a></li>
<li><a href="">HELLO</a></li>
<li><a href="">HELLO</a></li>
<li><a href="">HELLO</a></li>
<li><a href="">HELLO</a></li>
</ul>
</div>
似乎在Chrome中對我來說工作正常......無論如何，如果您使用'a'元素作爲參考點，絕對定位它們也不應該成爲問題。 – CBroe
@CBroe它不能在Firefox中工作。如果我使用'position：absolute'，他們會爬過'a'元素內容 –