如何使用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

尝试为第二个和第三个 a 添加 :before。

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

我想这对你应该有帮助。

记得去掉第一个。

如何使用css制作可以被悬停效果覆盖的垂直线分隔符？

how to make vertical line separator which can be covered by hover effect using css?

css

line

separator