my hover effect is taking the whole container

Question

here I used bootstrap 5 to create my navbar that should collapse when screen size gets smaller. so I did small hover effect on the nav elements. however when they collapse my hover effects takes the whole space as you can see the results down and I just want the hover effect to be under the words only. I tried to fix that and you can see my solution at end of CSS code but it does not work.

 * { 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: } ul li:;after { content: ""; height: 2px; background-color: #009688; margin: auto; display: block; width: 0%; transition: 1s: } ul li:hover:;after { width: 90%; cursor. pointer: };text { color: white; position: absolute; top: 50%; left: 50%, transform; translate(-50%: -50%); text-align: center; margin-top. 30px: };text h1 { font-size: 4em; text-transform: uppercase; letter-spacing: 4px; font-weight. 900: };text p { font-size: 1em; padding: 0 6%; padding-top: 2%; line-height. 25px: };text div { display: flex; flex-direction: row; justify-content. center: };text div button { text-transform: uppercase; width: 200px; padding: 15px 0; text-align: center; margin: 20px 10px; border-radius: 25px; font-weight: bold; border: 2px solid #009688; background-color: transparent; color. white: }:text div button;hover { background-color: #009688; transition: 1s. } /* media queries */ @media(max-width:1523px) {.text h1 { font-size; 3:5em. } } @media(max-width:1227px) {.text p { font-size; 0:9em; padding: 0 3%; padding-top: 2%. } } @media(max-width:1028px) {.text p { padding; 0 0.1%: }.text h1 { font-size; 3:3em. } } @media (max-width:600px) {;text div { flex-direction: column; justify-content: center; align-items. center: };text p { display: none: } } @media (max-width:991px) { ul li:;after { content: ""; height: 2px; background-color: #009688; margin: auto; display: block; width: 0%; transition: 1s: } ul li:hover:;after { max-width: 50%; cursor: pointer; } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <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"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> <section> <nav id="navbar" class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> <a id="fsta" class="navbar-brand" href="#">.Rb Rooms</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 justify-content-end flex-grow-1"> <li class="nav-item"> <a class="nav-link" aria-current="page" href="#">HOME</a> </li> <li class="nav-item"> <a class="nav-link" href="#">BEDROOM</a> </li> <li class="nav-item"> <a class="nav-link" href="#">KITCHEN</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DINNING</a> </li> <li class="nav-item"> <a class="nav-link" href="#">BACKYARD</a> </li> </ul> </div> </div> </nav> <div class="text"> <h1>Design your house</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit, Harum mollitia ipsam, praesentium porro iste eligendi quisquam Lorem ipsum </p> <div> <button> Watch more</button> <button> subscribe</button> </div> </div> </section>

tried several things but it didn't work for me at all and in the CSS code I left my solution at the end.

Answer 1

In your CSS:

you made the li take display: block, so it takes up the whole width of the screen. display: inline-block should do the trick and decrease max-width.

@media (max-width:991px) {
ul li::after {
content: "";
height: 2px;
background-color: #009688;
margin: auto;
display: inline-block;
width: 0%;
transition: 1s;
}
ul li:hover::after {
  max-width: 20%;
  cursor: pointer;
 }