Hover highlighter effect

Question

As you can see the code snippet, there is a highlighter effect. I want to have a darker highlighter effect if the user hovers the text. I tried it with highlighter:hover. But if I'm using this the small highlighter effect disappears. I want when the user hovers the text it should be darker and the same size as before. How could I do this?

.highlight {
  position: relative;
}


.highlight::after {
  content: " ";
  left: 0;
  right: 0;
  position: absolute;
  bottom: 1px;
  height: 6px;
  background-color: #9bffb0a6;
  z-index: -1;      
}
.highlight:hover{
  background-color: #4dff73;

  
}

<div><span class="highlight">Text</span>Another Text</div>

`.highlight:hover::after` – Temani Afif Nov 01 '20 at 20:26 — Temani Afif, Nov 01 '20 at 20:26

score 0 · Accepted Answer · answered Nov 01 '20 at 20:26

You can update the background color of the highlight border which is defined on ::after pseudo selector when hovering the .hightlight selector using .hightlight:hover::after as follows.

.highlight {
  position: relative;
}


.highlight::after {
  content: " ";
  left: 0;
  right: 0;
  position: absolute;
  bottom: 1px;
  height: 6px;
  background-color: #9bffb0a6;
  z-index: -1;      
}
.highlight:hover::after {
  background-color: #4dff73;
}

<div><span class="highlight">Text</span>Another Text</div>

Hover highlighter effect

1 Answers1