底部

Question

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

在我的：after元素后，它与位置绝对和前0一起运行良好。但是，如果我想制作相同的高度动画，但是从底部到顶部的对开方向，我应该改变前0的底部0。

这就是问题出现的地方，我的：元素在我的文本块之后？

这是我的代码：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>

尝试将.0：0的前0位改为底部0，然后查看问题

感谢您的帮助！

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

Answer 1

检查以下代码段以获取答案。我刚刚将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>