Hover effect underline menu

Hi! I found a code for this hover effect.
But now everything (also logo and social media icons) underline. What is the solution?

    .main-navigation ul.menu > li > a { 
    a:hover {
        color: #78A0B4;
        text-decoration: none;
    }
    a {
        transition: color 0.1s, background-color 0.1s;
    }
    a {
        position: relative;
        display: block;
        transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
        color: #78A0B4;
    }
    a::before {
        content: '';
        display: block;
        position: absolute;
        bottom: -3px;
        left: 0;
        height: 3px;
        width: 100%;
        background-color: #78A0B4;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: color 0.1s,transform 0.2s ease-out;
    }
    a:active::before {
        background-color: #000;
    }
    a:hover::before, a:focus::before {
        transform-origin: left top;
        transform: scale(1, 1);
    }
          }

Hi,

I make a little revision of the code above, please try to use this code instead:

.main-navigation ul.menu > li > a {
    transition: color 0.1s, background-color 0.1s;
    position: relative;
    display: block;
    transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
    color: #78A0B4;
}
.main-navigation ul.menu > li > a:hover {
    color: #78A0B4;
    text-decoration: none;
}

.main-navigation ul.menu > li > a:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #78A0B4;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: color 0.1s,transform 0.2s ease-out;
}

.main-navigation ul.menu > li > a:active::before {
    background-color: #000;
}

.main-navigation ul.menu > li > a:hover::before, 
.main-navigation ul.menu > li > a:focus::before {
    transform-origin: left top;
    transform: scale(1, 1);
}

Regards,