Css过渡 - 从底部填写文本

Question

我有黑色文字,我想在悬停时变黄.

但是,我想转换为使文本从文本的底部到顶部填充颜色.

纯css有可能吗？

Answer 1

1. 在data-*属性中存储相同的文本.
2. 使用::before或者::after伪元素将其放在文本正上方.
3. 将其高度设置为0悬停时的动画.

.text {
  display: inline-block;
  vertical-align: top;
  position: relative;
  line-height: 40px;
  font-size: 30px;
  cursor: pointer;
  margin: 20px;
  color: gold;
}

.text:before {
  transition: height 0.5s ease;
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  height: 40px;
  color: black;
  left: 0;
  top: 0;
}

.text:hover:before {
  height: 0;
}

<div class="text" data-text="Some text here">Some text here</div>