Блог

Я пытался получить тег li, когда он был наведен, чтобы подчеркнуть тег a, в настоящее время при наведении курсора мыши на тег li строка проходит под всем тегом li, а не под тегом a.

HTML, простой значок над тегом внутри функции

 <li id="underline"><a type="button" id="speakBtn">
              <div class="icon"><i class="fas fa-play"></i></div>
              <div class="title  ">Text To Speech</div>
              </a></li>  
              
          <li class="underline"><a type="button" id="pauseBtn">
              <div class="icon"><i class="fas fa-pause"></i></div>
              <div class="title whiteTxt ">Pause</div>
              </a></li>  
          
          <li class="navButton"><a type="button" id="resumeBtn">
              <div class="icon"><i class="fas fa-play-circle"></i></div>
              <div class="title whiteTxt ">Resume</div>
              </a></li>    
              
          <li class="navButton"><a type="button" id="cancelBtn">
              <div class="icon"><i class="fas fa-stop"></i></div>
              <div class="title whiteTxt ">Stop</div>
              </a></li>  
  

CSS

li и отображение по умолчанию

 .wrapper .sidebar__inner .siderbar_menu li a {
  padding: 10px 50px;
  display: block;
  height: 90px;
  position: relative;
  margin-bottom: 1px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}


.wrapper .sidebar__inner .siderbar_menu a {
  background-image:linear-gradient(#fff,#fff);
  background-position:bottom left;
  background-size:0% 2px;
  background-repeat:no-repeat;
  transition:
  background-size .5s,
  background-position 0s 1s;
}
  

li и отображение при наведении курсора

 .wrapper .sidebar__inner .siderbar_menu li.active {
  background: #a6a6a6;
  
}

.wrapper .sidebar__inner .siderbar_menu a:hover,
.wrapper .sidebar__inner .siderbar_menu a.active {
  color: #fff;
  background-position:bottom left;
  background-size:100% 2px;
}

  

Я думаю, вам понравится это:

 body {
  background: blue;
}
.wrapper .sidebar__inner .siderbar_menu {
  list-style: none;
  padding: 0;
}
.wrapper .sidebar__inner .siderbar_menu li {
  text-align: center; /*Css add*/
  display: inline-block; /*Css add*/
}
.wrapper .sidebar__inner .siderbar_menu li a {
  padding: 10px 50px;
  display: inline-block; /*Css Change*/
  height: 20px;
  position: relative;
  margin-bottom: 1px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}
.wrapper .sidebar__inner .siderbar_menu a {
  background-image:linear-gradient(#fff,#fff);
  background-position:bottom left;
  background-size:0% 2px;
  background-repeat:no-repeat;
  transition:
  background-size .5s,
  background-position 0s 1s;
}
.wrapper .sidebar__inner .siderbar_menu li.active {
  background: #a6a6a6;  
}
.wrapper .sidebar__inner .siderbar_menu a:hover,
.wrapper .sidebar__inner .siderbar_menu a.active {
  color: #fff;
  background-position:bottom left;
  background-size:100% 2px;
}  

 <div class="wrapper">
  <div class="sidebar__inner">
    <ul class="siderbar_menu">
      <li id="underline"><a type="button" id="speakBtn">
        <div class="icon"><i class="fas fa-play"></i></div>
        <div class="title  ">Text To Speech</div>
        </a>
      </li>
      <li class="underline"><a type="button" id="pauseBtn">
        <div class="icon"><i class="fas fa-pause"></i></div>
        <div class="title whiteTxt ">Pause</div>
        </a>
      </li>
      <li class="navButton"><a type="button" id="resumeBtn">
        <div class="icon"><i class="fas fa-play-circle"></i></div>
        <div class="title whiteTxt ">Resume</div>
        </a>
      </li>
      <li class="navButton"><a type="button" id="cancelBtn">
        <div class="icon"><i class="fas fa-stop"></i></div>
        <div class="title whiteTxt ">Stop</div>
        </a>
       </li> 
    </ul>
  </div>
</div>  

 li:hover a{
text-decoration: underline;
}
  

вы можете использовать имя своего класса вместо li и тега привязки.

 li a:hover{
text-decoration:underline;
}