汉堡菜单

<span class="open-icon-menu"></span>

<style>
.open-icon-menu {
    display: inline-block;
    position: relative;
    border-top: 1px var(--color-font-2) solid;
    width: 14px;
    height: 12px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all .5s;
}
.open-icon-menu::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 6px;
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
    left: 0px;
    right: 0;
    height: 1px;
    background: var(--color-font-2);
    transition: all .5s;
}
.open-icon-menu::after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 1px;
    right: 0px;
    left: 0;
    height: 1px;
    background: var(--color-font-2);
    transition: all .5s;
}
.open-icon-menu:hover {
    border-color: var(--app-color-2);
}
.open-icon-menu:hover::before,
.open-icon-menu:hover::after {
    background: var(--app-color-2);
}
</style>