html - CSS隐藏文本的顶部

Question

我更喜欢纯 CSS 解决方案；我可以改变 HTML 结构；始终只有一行文本

TL;DR;

如何隐藏文本的顶部而不是底部:

div {
  overflow: hidden;
  height: 11px;
}

<div>HOME</div>

完整示例

我想隐藏文本行的顶部以便模拟过渡效果:

div {
  height: 20px;
  width: 100px;
  text-align: center;
}
div span {
  display: block;
  overflow: hidden;
  transition: all 500ms ease-in-out;
  height: 20px;
}
div .default {
  color: black;
  background-color: #f0f0f0;
}
div .hover {
  height: 0;
  color: white;
  background-color: black;
}
div:hover .hover {
  height: 25px;
}
div:hover .default {
  height: 0px;
}

<div>
  <span class="default">HOME</span>
  <span class="hover">HOME</span>
</div>

正如您在示例中看到的那样，.hover 目前正在从底部滑动，因为当高度降低时，文本会从底部隐藏到顶部。

我想从上到下隐藏文本，这样看起来相同的文本会反转它的颜色。

Answer 1

你反对我用伪元素来做吗？我调整了 bottom 高度，使其与 content 属性中的文本一起从上到下显示。

div .default {
  display: block;
  overflow: hidden;
  height: 20px;
  position: relative;
  color: black;
  background-color: #f0f0f0;
}
div .default:after { content: "Home"; position: absolute; left: 0; bottom: 100%; right: 0; background: #000; color: #fff; text-transform: uppercase; transition: all 500ms ease-in-out;}
div .default:hover:after { bottom: 0; }

HTML

<div>
  <span class="default">HOME</span>
</div>

Like this

其他保持结构并避免内容属性中出现文本的解决方案

<div>
  <span class="default">HOME</span>
  <span class="black">HOME</span>
</div>

CSS

div .black { position: absolute; left: 0; bottom: 100%; right: 0; background: #000; color: #fff; text-transform: uppercase; transition: all 500ms ease-in-out;}
div .default:hover ~ .black { bottom: 0; }

Fiddle with 2nd solution