//less
.mk-nav{
li{
position: relative;
&:before{ position: absolute; content: ''; top:0; left:0; background:@mkcolor4;transform:scale(0);}
&:hover:before{transform:scale(1);}
}
}//html
<ul class='mk-nav'>
<li>首页</li>
<li>简介</li>
</ul>li相对定位，before绝对定位，鼠标滑过想让before作为li的背景色，这样就不用再加标签了，但是发现before遮住了li里面的文字
之所以不给li设置background是因为我想通过before的高度做一个交互小动画
我想到一个方法就是降低透明度，opacity:.15;,发现是可行的，文字漏出来了，点击文字链接竟然也能触发，这一点颇为神奇。
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
遮住的话你用rgba不就透过来了……但还是不明白这个交互是要做什么，li:hover不一样可以做动画交互么
那你为什么不直接给li设置。。。。background
：hover不行吗？
好像绝对定位总是会浮动到元素的最上层的（相对于其他定位方式）。所以用绝对定位的元素做背景怕是不行。题主你可以考虑换换试试，把li设成绝对定位。
你也可以这样：<li>首页</li>，（给文字一个标签包裹起来），然后给伪类befor设置z-index:-666(负值)，给a标签设置z-index：10（正值），然后就看到文字在伪类的上面了