Search code examples
csslineseparator

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

I have a problem when making a vertical line separator for navigation menu.

When I makes a navigation, it's require a vertical line separator. But, when I hover the navigation menu, the vertical line separator cannot be covered by the hover effect, please see below image.

enter image description here

How to make the line separator covered by hover effect?

This is my 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;
    }

And this is my 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>
Solution

  • Try add :before for second and third a.

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

    I think this should help you.

    Remember to remove of the first a.