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>