why the after pseudo element is not showing up

Question

I'm trying to add simple hover effect for my navbar that I used the help of bootstrap 5 in it. however, there should me a red line under my links that should be showed up when I hover on them but that's not happening. here is my html and CSS code that I have written so far. as you can see I used the after pseudo element to insert a small line under my anchor tags but it is not showing up at all I tried everything

* {
    margin: 0;
    padding: 0;
    font-family: 'Reem Kufi Fun', sans-serif;
}

section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
    min-height: 100vh;
    width: 100%;
    background-size: cover;
    position: relative;
    background-position: center;
}

#navbar {
    background-color: transparent !important;
    padding: 2% 6%;
}

a {
    color: white !important;
}

#fsta {
    font-size: 2em;
}

li {
    padding-right: 2%;
    position: relative;
    display: inline-block;
    list-style: none;
}

a::after {
    content: "" !important;
    height: 2px !important;
    color: red !important;
    margin: auto !important;
    display: block !important;
    width: 100% !important;
    transition: 1s !important;
}

a:hover::after {
    width: 100% !important;

    cursor: pointer !important;

}

Damzaky · Answer

You used color instead of background, and to make it work only on hover, you should hide it first then show it upon hover, such as by using display, opacity, or visibility, though since you want transition, opacity might be the best one.

* {
    margin: 0;
    padding: 0;
    font-family: 'Reem Kufi Fun', sans-serif;
}

section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
    min-height: 100vh;
    width: 100%;
    background-size: cover;
    position: relative;
    background-position: center;
}

#navbar {
    background-color: transparent !important;
    padding: 2% 6%;
}

a {
    color: white !important;
}

#fsta {
    font-size: 2em;
}

li {
    padding-right: 2%;
    position: relative;
    display: inline-block;
    list-style: none;
}

a::after {
    content: "" !important;
    height: 2px !important;
    background: red !important;
    margin: auto !important;
    display: block !important;
    width: 100% !important;
    transition: 1s !important;
    opacity: 0;
}

a:hover::after {
    width: 100% !important;
    opacity: 1;

    cursor: pointer !important;

}

why the after pseudo element is not showing up

1 Answers