Html 从底部开始的Div height动画方向问题

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

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

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

这是我的密码：

.text{
字体系列：“蒙特塞拉特”，无衬线；
字号：12em；
字号：700；
位置：相对位置；
显示：内联块；
背景色：黑色；
颜色：#fff；
}
.正文：之后{
过渡：所有的1容易；
内容：attr（数据内容）；
显示：块；
位置：绝对位置；
排名：0；
左：0；
右：0；
颜色：黑色；
宽度：100%；
身高：0%；
溢出：隐藏；
*背景色：黑色；
z指数：1000；
}
.text:悬停：在{
身高：100%；
边界半径：0px；
}

宏伟的

检查下面的代码片段以获得答案。我刚刚将您的

height

属性从100%更改为0%，并更改了默认颜色和after颜色，因为after需要100%的高度。希望能有帮助

.text{
字体系列：“蒙特塞拉特”，无衬线；
字号：12em；
字号：700；
位置：相对位置；
显示：内联块；
颜色：#39A966；
}
.正文：之后{
过渡：所有的1容易；
内容：attr（数据内容）；
显示：块；
位置：绝对位置；
排名：0；
左：0；
右：0；
颜色：#000；
宽度：100%；
身高：100%；
溢出：隐藏；
*背景色：黑色；
z指数：1000；
}
.text:悬停：在{
身高：0%；
边界半径：0px；
}

宏伟的

哈哈，你把逻辑切换对了吗？悬停现在隐藏了错误的颜色！我怎么会错过这个？？？有时候我觉得这份工作很糟糕，伙计。。。是的，它帮了我很大的忙，我已经两天了！非常感谢你！还有一个浏览器的小故障，你的方式做它修复！但也许你知道用另一种方式解决问题。因为从100%开始，两个文本的大小完全相同，填充动画非常完美。另一方面，当你从0%开始时，背景中文本颜色的文本周围有一条奇怪的0.5px线。你知道如何解决这个问题吗？我编辑了我的第一篇文章，让你更清楚地看到浏览器问题。@GordonFreeman你在哪里发现浏览器故障？你能说得具体点吗？如果你看这张照片，你会看到的！我在edge、firefox和chrome上也有同样的问题。这是我编辑的第一篇文章：