hover效果不出现

给列表中的li添加hover效果，不起作用

 
   manro首页
       <1i>迈若
       <1i>服务
       <1i>案例
       <1i>新闻
       
联系
   
 

 .header-nav-right>li::beforef
   Content:
   display:        block;
   width:92px
   height:4px;
   background-color:                  口#eb3a2b;
   position:absolute
   left:0;
   top:56px
   /*Z-index:          2:*
   opacity:0
 header-nav-right>li:hover li::beforef
   opacity:1;

求解答

css选择器写错了，li元素鼠标悬浮的伪类应该是

li:hover::before

在浏览器的f12里看看hover应用到对应节点了么

HTML代码：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

css
Copy code
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
CSS代码：

css
Copy code
/* 鼠标悬停在li标签上时应用的样式 */
li:hover {
  background-color: #ccc;
  color: #fff;
}

/* 为了使鼠标悬停效果更明显，可以添加一些过渡效果 */
li {
  transition: background-color 0.5s ease;
}

在上面的代码中，我们使用了:hover伪类来指定鼠标悬停在li标签上时应用的样式，这里设置了背景色为灰色，文本颜色为白色。我们还使用了过渡效果来使鼠标悬停效果更加平滑。

当鼠标悬停在列表项上时，它们将呈现灰色背景和白色文本。您可以根据自己的需要更改样式属性以实现所需的效果。
如有帮助，还请动动手指点个赞