Question

我有以下代码

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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

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

我知道overflow:hidden会阻止文字浮出父级。

Answer 1

基本上溢出：隐藏正在做的只是隐藏滚动条。

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

overflow:scroll

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

Answer 2

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

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

因此，如果您的元素 .fillColor：after 具有 width：0 和 overflow：hidden 属性，则其内容剪裁为0px宽度并且不可见，但是如果你删除溢出：隐藏，内容就不再有clipps了，文本会从 .fillColor：after 元素中浮出来并且有自己的宽度。

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

2 个答案: