CSS hamburger menu icon with different line widths

Question

I've created a simple hamburger menu icon where I want the middle line to be slightly shorter than the other two. Can this be done without creating multiple divs? My current solution is done by multiple box-shadows, see my working example.

This is what I have vs what I want to achieve:

My CSS:

.menu-button:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 20px;
    width: 24px;
    height: 4px;
    background: #0e3c89;
    box-shadow: 0 8px 0 0 #0e3c89, 0 16px 0 0 #0e3c89;
}

Thanks!

Answer 1

Yes, this can be done without extra markup. Here is one way you could do it:

.menu-button {
    width: 20px;
    height: 4px;
    background: #0e3c89;
    margin: 20px 0 0 20px;
}

.menu-button:before {
    display: block;
    content: "";
    width: 28px;
    height: 4px;
    box-shadow: 0 -8px 0 0 #0e3c89, 0 8px 0 0 #0e3c89;
}

<div class="menu-button"></div>