CODEWITHSUNDEEP
csslineseparator
Saddam Habibie
Saddam Habibie

Reputation: 64

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>

Upvotes: 0

Views: 569

Answers (1)

Rodrigo Boniatti
Rodrigo Boniatti

Reputation: 447

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.

Upvotes: 1

Related Questions