css3 - css before作为父级元素的背景色遮住了文字怎么办？

Question

//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;,发现是可行的，文字漏出来了，点击文字链接竟然也能触发，这一点颇为神奇。

Answer 1

If you use rgba to cover it, it will come through... But I still don’t understand what this interaction is about. Can animated interaction be done differently with li:hover?

Answer 2

Then why don’t you set it directly for li. . . . background

Answer 3

: Can’t hover?

Answer 4

It seems that absolute positioning will always float to the top of the element (relative to other positioning methods). So it’s probably not possible to use absolutely positioned elements as backgrounds. As for the question, you might consider changing it and setting li to absolute positioning.

Answer 5

You can also do this: <li>Homepage</li>, (wrap the text with a label), then set z-index:-666 (negative value) for the pseudo-class before, and set z for the a tag -index: 10 (positive value), and then you can see the text on top of the pseudo class