A small line appearing when hovering over an icon

Question

I was making my template for my next Django project. Then this happened;

The line(shown by the blue arrow) is appearing when I hover the 'home' icon. I used FontAwesome 5 for my icons and bootstrap 4.5 for styling.

It happens for all the other icons too.

I really do not know what is going on.

Here is my code

index.html

    <nav class="navbar navbar-light">
        <a class="navbar-brand" href="#">
            Grouper
        </a>
        <input 
            class="form-control mr-sm-2" 
            type="search" 
            placeholder="Search" 
            aria-label="Search"
        >
        <nav>
            <a href="#">
                <i class="fas fa-home"></i>
            </a>
            <a href="#">
                <i class="fas fa-plus-circle"></i>
            </a>
            <a href="#">
                <i class="fas fa-user-circle"></i>
            </a>
            <a href="#">
                <i class="fas fa-cog"></i>
            </a>
        </nav>
    </nav>

styles.css

a {
    outline: medium none;
}

.navbar {
    display: flex;
    background-color: #fafafa;
}

.navbar-brand {
    font-family: 'Poppins';
    font-weight: 500;
}

.form-control {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    border: 1px solid #eee;
    max-width: 50%;
}

.form-control:focus {
    border: 2px solid dodgerblue;
}

.fas {
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 20px;
    padding: 10px;
    margin-right: 5px;
}

.fa-home {
    background-image: linear-gradient(to bottom, red, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fa-plus-circle {
    background-image: linear-gradient(to bottom, red, purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fa-user-circle {
    background-image: linear-gradient(to bottom, red, indigo, purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fa-cog {
    background-image: linear-gradient(to bottom, black, grey, #eee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Any answer will be ok. Thanks.