html - 隐藏 :before on :hover button

Question

我不知道应该如何隐藏 :before 元素，并且仅当它位于按钮 div“内部”时才使其可见，以便在悬停按钮上创建填充效果。

a.button {
  font-size: 20px;
  color: #000;
  border: 2px solid #000;
  padding: 8px 12px;
  position: relative;
  margin: 0;
}

a.button:before {
  transition: 0.5s all ease-in-out;
  content: '';
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

a.button:hover {
  transition: 0.6s all ease-in-out;
  color: #fff;
}

a.button:hover:before {
  transition: 0.5s all ease-in-out;
  top: 0;
}

<a href="#" class="button">buttt</a>

Answer 1

将 :before 元素高度设置为 0 ，然后在 :hover:before 上将其更改为 100%

片段

a.button {
  font-size: 20px;
  color: #000;
  border: 2px solid #000;
  padding: 8px 12px;
  position: relative;
  margin: 0;
}

a.button:before {
  transition: 0.5s all ease-in-out;
  content: '';
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
}

a.button:hover {
  transition: 0.6s all ease-in-out;
  color: #fff;
}

a.button:hover:before {
  transition: 0.5s all ease-in-out;
  top: 0;
  height:100%;
}

<a href="#" class="button">buttt</a>