On hover the after element should only be visible on one element at a time but instead is treating them as one

user_12857112 0
Viewed 27

On hover I would like each icon to have an underline but instead all items are get an underline. I'm not sure how to get it to apply for only the icon that is being hovered.

I want something like this hovered icon

but instead it looks like this

my hovered image

.top-bar {
  display: flex;
  align-items: center;
  padding: 1.25rem 2rem;
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
}

.fa-bars {
  font-size: 2.5rem;
}

.logo {
  margin-left: 1rem;
}

.logo img {
  display: block;
  width: 10rem;
  height: 1.66rem;
  color: #000;
}


.controls {
  position: relative;
  font-size: 2rem;
  margin-left: auto;
  margin-right: 3rem;
}


.controls-icon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  height: 0.2rem;
  width: 100%;
  background-color: #000;
  transition: all 0.5s;
  transform: scaleX(0);
}


.controls-icon:hover::after {
  transform: scale(1);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div class="top-bar container">
        <div class="menu-btn"><i class="fa-solid fa-bars"></i></div>
        <div class="logo"><img src="assets/img/logo.svg" alt="logo" /></div>
        <div class="controls">
          <i class="fa-solid fa-magnifying-glass controls-icon"></i>
          <i class="fa-solid fa-play controls-icon"></i>
          <i class="fa-solid fa-user controls-icon"></i>
        </div>
      </div>

css html
1 Answers

set position of i relative. like this i{ position:relative; }

.top-bar {
  display: flex;
  align-items: center;
  padding: 1.25rem 2rem;
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
}

.fa-bars {
  font-size: 2.5rem;
}

.logo {
  margin-left: 1rem;
}

.logo img {
  display: block;
  width: 10rem;
  height: 1.66rem;
  color: #000;
}


.controls {
  position: relative;
  font-size: 2rem;
  margin-left: auto;
  margin-right: 3rem;
}


.controls-icon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  height: 0.2rem;
  width: 100%;
  background-color: #000;
  transition: all 0.5s;
  transform: scaleX(0);
}


.controls-icon:hover::after {
  transform: scale(1);
}
i{
position:relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div class="top-bar container">
        <div class="menu-btn"><i class="fa-solid fa-bars"></i></div>
        <div class="logo"><img src="assets/img/logo.svg" alt="logo" /></div>
        <div class="controls">
          <i class="fa-solid fa-magnifying-glass controls-icon"></i>
          <i class="fa-solid fa-play controls-icon"></i>
          <i class="fa-solid fa-user controls-icon"></i>
        </div>
      </div>

user_143674160
Related