CSS动画 - 在中间剪切文本

Question

我在导航菜单中找到了悬停后使用动画效果的页面。

https://haimbenisty.com/

我不知道该怎么做。我已经测试了一些 CSS，但只能使笔画成为真正的文本。有谁知道该怎么做？我真的很喜欢这种效果，文字看起来像是从中间切开的。

Answer 1

使用

h1:hover{
  position:relative;
  display:inline-block;
    }
h1:after, h1:hover{
  content:'';
  position:absolute;
  width:100%;
  height:2px;
  left:0; top:17px;
  background:#fff;
}

<h1>EXAMPLE</h1>