Hover effect and underline disappear with changing the background color

Question

I have a main panel in an angular project. I wanted to change the background color of it, but then my underline and hover effects disappear.

Before changing the background color:

After changing the background color to white:

I have an admin layout which looks like this:

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

With the css:

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

Also the following home.component, where the text is:

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

And this is my css for the underlined and hovered element:

.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

The problem is caused by the negative z-index . Remove the property or set it to zero.

By setting this negative z-index , you move the ::after pseudo element behind .main-panel and since you explicitly set background color to the .main-panel , the pseudo element is always invisible.