Hover highlighter effect [duplicate]

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>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top