我怎样才能反转我的伪元素过渡的运动？

Question

所以我在学习伪元素的同时尝试制作这个按钮动画，我真的很接近实现我想要的，但是有一些东西真的让我很烦恼。

这是我目前拥有的：https://codepen.io/saifeldeenadel/pen/xxPwvdj?editors=1100

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(50vh - 40px);
}

#btn {
  position: relative;
  background: transparent;
  color: white;
  letter-spacing: 3px;
  padding: 10px 25px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 13pt;
  border: 0px;
  transition: 0.2s ease-in;
}

#btn:hover {
  color: black
}

#btn::before {
  content: '';
  background: #333333;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; 
  z-index: -1;
  transition: height 0.2s ease-in;
}

#btn:hover::before {
  height: 0%;
}

看起来不错。但我想要的是背景从上到下而不是从下到上。我试图操纵它的每一种方式都会导致我毁了整个事情，例如试图将按钮元素的背景设置为深灰色并将伪元素设置为白色导致元素完全覆盖文本和所以破坏了效果等等

所以如果你有任何想法请。

Answer 1

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(50vh - 40px);
}

#btn {
  position: relative;
  background: transparent;
  color: white;
  letter-spacing: 3px;
  padding: 10px 25px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 13pt;
  border: 0px;
  transition: 0.2s ease-in;
}

#btn:hover {
  color: black
}

#btn::before {
  content: '';
  background: #333333;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0; 
  z-index: -1;
  transition: height 0.2s ease-in;
}

#btn:hover::before {
  height: 0%;
}

<button id='btn'>know more </button>

在 #btn::before 中取消 top: 0 并添加 bottom: 0 然后它应该可以正常工作

Answer 2

有很多方法可以解决这个问题，您可以使用 transition: top 0.2s ease-in; 而不是 height 过渡。

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(50vh - 40px);
}

#btn {
  position: relative;
  background: transparent;
  color: white;
  letter-spacing: 3px;
  padding: 10px 25px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 13pt;
  border: 0px;
  transition: 0.2s ease-in;
}

#btn:hover {
  color: black
}

#btn::before {
  content: '';
  background: #333333;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  top: 0; 
  z-index: -1;
  transition: top 0.2s ease-in;
}

#btn:hover::before {
  top: 100%;
}

<button id='btn'>know more </button>

我怎样才能反转我的伪元素过渡的运动？

How can I reverse the movement of my pseudo element transition?

css

pseudo-element