在 div 之后悬停时划线：Safari 和 Chrome 之间的结果不同

Question

我使用了 css“技巧”来强调 div，其中包括添加一个内容为空并设置边框的伪元素 div::after：

.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);
  }
}

我在 Mozilla 中获得了想要的结果： enter image description here

但在 Chrome Opera 中都没有： enter image description here

在 div 内部出现了一些白色的 sapce，就好像它有一个高度。

有没有办法得到与 Mozilla 相同的结果？

Answer 1

使用 height 和 background 代替边框，使其在所有浏览器上看起来像一条线。所以你的 css 应该是这样的：

   .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);
      }
    }

在 div 之后悬停时划线：Safari 和 Chrome 之间的结果不同

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

css

opera

google-chrome

underline

pseudo-element