悬停效果和下划线随着背景颜色的变化而消失

Question

我在一个角度项目中有一个主面板。 我想更改它的背景颜色，但是我的下划线和悬停效果消失了。

在更改背景颜色之前：

将背景颜色更改为白色后：

我有一个看起来像这样的管理布局：

<div class="main-panel">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
</div>

使用CSS：

.main-panel {
  background-color: rgb(255, 255, 255);
}

还有以下 home.component，其中的文本是：

 <div><span class="highlight">Cloud Native</span>: Cloud Training, Cloud Development, Cloud Architecture, Cloud Assesment....</div>

这是我的下划线和悬停元素的css：

.highlight {
  position: relative;
}

.highlight::after {
  content: " ";
  left: 0;
  right: 0;
  position: absolute;
  bottom: 1px;
  height: 25%;
  background-color: #9bffb0a6;
  z-index: -1;
  border-radius: 2px;
}

.highlight:hover::after {
  background-color: #80ff9b;
}

Answer 1

问题是由负z-index引起的。 删除该属性或将其设置为零。

通过设置此负z-index ，您将::after伪元素移动到.main-panel后面，并且由于您明确设置了.main-panel背景颜色，因此伪元素始终不可见。