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 >
        <div ><i ></i></div>
        <div ><img src="assets/img/logo.svg" alt="logo" /></div>
        <div >
          <i ></i>
          <i ></i>
          <i ></i>
        </div>
      </div>

CodePudding user response：

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 >
        <div ><i ></i></div>
        <div ><img src="assets/img/logo.svg" alt="logo" /></div>
        <div >
          <i ></i>
          <i ></i>
          <i ></i>
        </div>
      </div>