不能得到：轉換到工作

我似乎無法得到不透明轉換工作在：僞元素之後，但在：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

不能得到：轉換到工作

回答

相關問題