CSS 使用溢出时转换不工作？

Question

我下面有这段代码

body {
  font-size: 40px;
  background-color: black;
}

.fillColor {
  color: transparent;
  text-decoration: none;
  position: relative;
  display: block;
  font-size: 40px;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  ;
}

.fillColor:before {
  content: attr(data-hover);
}

.fillColor:after {
  content: attr(data-hover);
  position: absolute;
  color: white;
  left: 0;
  width: 0;
  transition: width 10s;
  overflow: hidden;
  white-space: nowrap;
}

.fillColor:hover:after {
  width: 100%;
}

<p class="fillColor" data-hover="HUNG"></p>

但是当我在 css 中删除 overflow: hidden 时。 我的代码不是运行。 我不知道这个。我尝试删除并出现错误。

任何人都可以用这个来解释我。

我知道overflow:hidden 防止文本不浮出父级。

Answer 1

基本上 overflow:hidden 所做的只是隐藏滚动条。

尝试使用滚动编辑溢出，您会看到

overflow:scroll

但是，如果您删除 overflow:hidden，元素 fillColor:after 将呈现为可见。

Answer 2

在 css 中，overflow 属性指定块容器元素的内容在溢出元素的框时是否被剪裁。

值隐藏表示内容被剪裁并且不提供滚动条。

因此，如果您的元素 .fillColor:after 具有 width:0 和 overflow:hidden 属性，它的内容被剪裁成 0px 宽度并且不可见，但是如果你删除 overflow:hidden，内容就不再剪裁并且文本从 .fillColor 中浮出：在 元素之后并有自己的宽度。

CSS 使用溢出时转换不工作？

CSS transition not working when use overflow?

html

css

transitions