Css 过渡 - 文本从底部填充

Question

我想在鼠标悬停时将黑色文本设为黄色。

但是我想过渡使文本从文本底部到顶部填充颜色。

纯 css 可以吗？

Answer 1

在 data-* 属性中存储相同的文本。
用::before或::after伪元素把它放在正上方的文本上。
悬停时将其高度设置为 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>

Css 过渡 - 文本从底部填充

Css transition - text fill from bottom

css

colors

transitions