是否可以設置轉換延遲：after？

Question

如何在li:after上設置轉換延遲，使其與li:hover的轉換保持一致？當設置transition: all 0.3s;時似乎不起作用，因爲它立即顯示。

這裏是Fiddle

Answer 1

也許如果你做這樣的事情，你首先建立在:after，然後顯示它在:hover

body { 
 
    background-color: #f01; 
 
} 
 

 
ul { 
 
    background-color: #fff; 
 
} 
 

 
li { 
 
    position: relative; 
 
    list-style-type: none; 
 
    display: inline; 
 
    line-height: 2em; 
 
    padding: 5px; 
 
    transition: all 1s; 
 
} 
 

 
li:hover { 
 
    background-color: #414C52; 
 
    transition: all 1s; 
 
} 
 

 
li:after { 
 
    top: 25px; 
 
    left: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    border-color: rgba(136, 183, 213, 0); 
 
    border-top-color: #414C52; 
 
    margin-left: -10px; 
 
    transition: all 1s; 
 
    border-width: 10px; 
 
    opacity: 0; 
 
} 
 

 
li:hover:after { 
 
    opacity: 1; 
 
    transition: all 1s; 
 
} 
 

 
a { 
 
    padding: 12px 10px color: #333; 
 
}

<ul class="nav navbar-nav"> 
 
    <li><a href="#">asdfasdf</a></li> 
 
    <li class="active"><a href="#">ffffft</a></li> 
 
</ul>

Answer 2

是的，它應該做的，但你需要一個inital李：您的李前經過：懸停：後