Underline on hover with an after div : result differs between Safari and Chrome

Question

I used the css "trick" to underline a div which consists in adding a pseudo-elment div::after with empty content and set borders :

.is-hightlighted:after {
  content: "";
  height: 0;
  width: 100%;
  border: solid 1px black;
  position: absolute;
  bottom: 0;
  left: 0;
  animation: hightlightning_in 0.6s ease-out;
  transform-origin: left;
}

@keyframes hightlightning_in {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

I obtain the desired result in Mozilla : enter image description here

but not in Chrome neither Opera : enter image description here

where some white sapce appears inside the div as if it had an height.

Is there a way to get the same result as Mozilla's ?

Answer 1

Use height and background instead of border to make it look like a line on all the browsers. So your css should look like this:

   .is-hightlighted:after {
      content: "";
      width: 100%;
      height: 1px;
      background: black;
      position: absolute;
      bottom: 0;
      left: 0;
      animation: hightlightning_in 0.6s ease-out;
      transform-origin: left;
    }
    
    @keyframes hightlightning_in {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }