从底部开始的 Div 高度动画方向问题

Question

我正在使用文本顶部的 :after 元素制作一些文本填充动画，并为其高度设置动画以制作填充动画。

它在我的 :after 元素上与绝对位置和前 0 配合得很好。但是，如果我想制作相同的高度动画，但从底部到顶部的方向相反，我应该将顶部 0 更改为底部 0。

这就是问题出现的地方，我的 :after 元素在我的文本块下？

这是我的代码：https://codepen.io/1conu59/pen/zdVXOP

.text {
   font-family: 'Montserrat', sans-serif;
   font-size: 12em;
   font-weight: 700;
   position: relative;
   display: inline-block;
   background-color: black;
   color: #fff;
 }

.text:after {
   transition: all 1s ease;
   content: attr(data-content);
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   color: black;
   width: 100%;
   height: 0%;
   overflow: hidden;
   *background-color: black;
   z-index: 1000;
 }

.text:hover:after {
   height: 100%;
   border-radius: 0px;
 }

<div class="text" data-content="Grandioso">

	Grandioso

</div>

尝试将 .text:after 的 top 0 更改为 Bottom 0 并查看问题

感谢您的帮助！

编辑：如果您仔细观察，我认为也存在某种浏览器故障问题。当动画完成时，它在文本周围有一条 0.5 px 的线，它仅在您从 0% 到 100% 而不是 100% 到 0% 的动画时出现。你知道如何解决这个问题吗？我使用文字阴影，但效果不是很好...

Answer 1

检查下面的 sn-p 以获得您的答案。我刚刚将您的 height 属性更改为从 100% 到 0% 的动画，并更改了默认颜色和后颜色，因为后颜色为 100% 高度。希望对您有所帮助。

.text {
  font-family: 'Montserrat', sans-serif;
  font-size: 12em;
  font-weight: 700;
  position: relative;
  display: inline-block;
  color:#39A966;
}

.text:after {
  transition: all 1s ease;
  content: attr(data-content);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  *background-color: black;
  z-index: 1000;
}

.text:hover:after {
  height: 0%;
  border-radius: 0px;
}

<div class="text" data-content="Grandioso">

  Grandioso

</div>