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'元素内容 –