why the after pseudo element is not showing up-CodePudding

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;

}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>house</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">
    <link rel="stylesheet" href="app.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Lexend Deca:wght@400;500;600&family=Reem Kufi Fun:wght@400;500;700&display=swap"
        rel="stylesheet">
</head>

<body>
    <section>
        <nav id="navbar" >
            <div >
                <a id="fsta"  href="#">Rb Rooms</a>
                <button  type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <div  id="navbarSupportedContent">
                    <ul >
                        <li >
                            <a  aria-current="page" href="#">HOME</a>
                        </li>
                        <li >
                            <a  href="#">BEDROOM</a>
                        </li>
                        <li >
                            <a  href="#">KITCHEN</a>
                        </li>
                        <li >
                            <a  href="#">DINNING</a>
                        </li>
                        <li >
                            <a  href="#">BACKYARD</a>
                        </li>

                    </ul>

                </div>
            </div>
        </nav>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

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;

}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>house</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">
    <link rel="stylesheet" href="app.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Lexend Deca:wght@400;500;600&family=Reem Kufi Fun:wght@400;500;700&display=swap"
        rel="stylesheet">
</head>

<body>
    <section>
        <nav id="navbar" >
            <div >
                <a id="fsta"  href="#">Rb Rooms</a>
                <button  type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <div  id="navbarSupportedContent">
                    <ul >
                        <li >
                            <a  aria-current="page" href="#">HOME</a>
                        </li>
                        <li >
                            <a  href="#">BEDROOM</a>
                        </li>
                        <li >
                            <a  href="#">KITCHEN</a>
                        </li>
                        <li >
                            <a  href="#">DINNING</a>
                        </li>
                        <li >
                            <a  href="#">BACKYARD</a>
                        </li>

                    </ul>

                </div>
            </div>
        </nav>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>
</body>

</html>