How to set the current-menu-item pseudo-element?

Question

css

How to write before for current-menu-item so that it is always on the active item.

.current-menu-item {
    background: #393d41;
    cursor: pointer;
}

.current a::before {
    content: "";
    bottom: 0px;
    position: absolute;
    width: 100%;
    left: 0;
    height: 4px;
    background: #3b8dbd;
}

.menu li a{
    text-decoration: none;
    display: block;
    padding: 0 15px;
    position: relative;
    color: #6B90FF;
}

.menu li a:hover, a:active {
    background: #393d41;
}

.menu li a:hover::before {
    width: 100%;
}

.menu li a::before {
    content: "";
    bottom: 0px;
    position: absolute;
    width: 0;
    left: 0;
    height: 4px;
    background: #3b8dbd;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}