不能得到：转换到工作

我似乎无法得到不透明转换工作在：伪元素之后，但在：before元素上的相同转换完全正常工作。任何帮助表示赞赏！不能得到：转换到工作

.top-nav li a:hover:after { 
    content: "/"; 
    display: inline-block; 
    opacity: 1; 
    transition: opacity 0.2s; 
    margin-left: 10px; 
} 

.top-nav li a:after { 
    content: "/"; 
    display: inline-block; 
    opacity: 0; 
    transition: opacity 0.2s; 
    margin-left: 10px; 
    position: absolute; 
} 

.top-nav li a:hover:before { 
    content: "/"; 
    display: inline-block; 
    opacity: 1; 
    transition: opacity 0.2s; 
    margin-right: 10px; 
} 

.top-nav li a:before { 
    content: "/"; 
    display: inline-block; 
    opacity: 0; 
    transition: opacity 0.2s; 
    margin-right: 10px; 
}

来源

2017-11-18 CMYKey

在我的测试使用CSS都：之前和：转换工作后。必须发挥其他一些因素。一种可能性是相邻的按钮位于较高的z-索引处，并且在内容之后遮蔽：。你能制作一个简化的测试用例来重新创建这个bug吗？看到控制导航布局的CSS和HTML标记会很有帮助。 –

这里是一个小提琴，展示了我在之前的评论中描述的重叠可能性：https：//jsfiddle.net/k9euprr4/请注意第三和第四列表项目如何掩盖他们的邻居。在伪内容仍然存在之后，它只是隐藏在相邻按钮后面。 –

它的工作尽量给宽度李然后它会显示

.top-nav li a:hover:after { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 1; 
 
    transition: opacity 2s; 
 
    margin-left: 10px; 
 
    
 
} 
 

 
.top-nav li a:after { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 0; 
 
    transition: opacity 0.2s; 
 
    margin-left: 10px; 
 
    position: absolute; 
 
} 
 

 
.top-nav li a:hover:before { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 1; 
 
    transition: opacity 0.2s; 
 
    margin-right: 10px; 
 
} 
 

 
.top-nav li a:before { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 0; 
 
    transition: opacity 0.2s; 
 
    margin-right: 10px; 
 
} 
 

 
.top-nav { 
 
    list-style: none; 
 
} 
 
.top-nav li { 
 
    float: left; 
 
    position: relative; 
 
    background:white; 
 
    width:85px; 
 
    text-align:center; 
 
}

<ul class="top-nav"> 
 
<li><a href="#">One</a></li> 
 
<li><a href="#">Two</a></li> 
 
<li><a href="#">Three</a></li> 
 
<li><a href="#">Four</a></li> 
 
</ul>

来源

2017-11-18 04:09:30 Gattbha

不能得到：转换到工作

回答

相关问题