Html 当鼠标悬停在li上时，如何使标记下划线

我一直在尝试获取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>  

李和一个悬停显示器

.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;
}

---

你可以用你的类名代替li和anchor标记。

我想你会喜欢这样：

正文{
背景：蓝色；
}
.wrapper.sidebar\u内部.sidebar\u菜单{
列表样式：无；
填充：0；
}
.wrapper.sidebar\u inner.sidebar\u菜单li{
文本对齐：居中；/*Css添加*/
显示：内联块；/*Css添加*/
}
.wrapper.sidebar\u inner.sidebar\u菜单li a{
填充：10px 50px；
显示：内联块；/*Css更改*/
高度：20px；
位置：相对位置；
边缘底部：1px；
颜色：#fff；
文本对齐：居中；
文本转换：大写；
}
.wrapper.sidebar\u内部.sidebar\u菜单a{
背景图像：线性梯度（#fff，#fff）；
背景位置：左下角；
背景尺寸：0%2px；
背景重复：无重复；
过渡：
背景尺寸.5s，
背景位置0s1s；
}
.wrapper.sidebar\u内部.sidebar\u菜单li.active{
背景：#A6；
}
.wrapper.sidebar\u-inner.sidebar\u菜单a:悬停，
.wrapper.sidebar\u内部.sidebar\u菜单a.active{
颜色：#fff；
背景位置：左下角；
背景尺寸：100%2px；
}

文本到语音


暂停


简历


停止

确实如此，您更改了什么？在标记中添加

display:inline block

.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;
}

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

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