如何使垂直線分隔符可以覆蓋懸停效果使用CSS？

Question

對導航菜單製作垂直線分隔符時出現問題。

當我進行導航時，它需要一個垂直行分隔符。但是，當我懸停導航菜單時，垂直線分隔符不能被懸停效果覆蓋，請參閱下圖。

如何使通過懸停效果覆蓋行分隔符？

這是我的CSS：

.admin-functions{ 
     background: linear-gradient(#ffffff, #f0f0ff); 
     border-bottom-left-radius: 5px; 
     border-bottom-right-radius: 5px; 
     border: 2px #0A78DC solid; 
     display: table; 
    } 
    .admin-functions a{ 
     text-decoration: none; 
     display: table-cell; 
     padding: 5px 10px; 
     text-align: center; 
    } 
    .admin-functions a:hover{ 
     background : linear-gradient(#0abedc, #0a78dc); 
     color: white; 
    } 
    .separator{ 
     border: 1px solid #0a78dc; 
     margin-left:-2px; 
    } 

這是我的HTML：

<nav class="admin-functions"> 
     <a href="#">Job Manage</a> 
     <span class="separator"></span> 
     <a href="#">Applicant Manage</a> 
     <span class="separator"></span> 
     <a href="#">Company Info</a> 
    </nav> 

Answer 1

嘗試添加：之前第二和第三一個。

.admin-functions a:hover:before { 
    position: absolute; 
    top: 0; 
    left: -2px; 
    content: ""; 
    width: 2px; 
    height: 100px; 
    background: linear-gradient(#0abedc, #0a78dc); 
} 

我認爲這應該對您有所幫助。

記得去掉第一個a。