CSS :before visible when overflow hidden

Question

之前可以显示一些东西吗？什么时候 overflow hidden ？或者我们可以指定 side 将被隐藏以防止溢出吗？ 例如:

.before {
  width: 200px;
  margin: 30px;
  background-color: blue;
  height: 30px;
  position: relative;
}

.before:before {
  content: "221";
  color: blue;
  font-size: 15px;
  display: inline-block;
  position: absolute;
  left: -20px;
  top: -20px;
}

#ex2 {
  overflow: hidden;
}

<div id='ex1' class='before'>Wisible text with css before, more text, more and more... but </div>
<div id='ex2' class='before'>hidden overflow text with css before... more and more text</div>

Answer 1

如果您将某个元素声明为 overflow:hidden ，它将应用于所有内容，包括 before 和 after 元素。无法禁用特定子项的隐藏值。

考虑将您的内容包装在具有其父级的最大宽度和高度的 div 中，并在该 div 上设置 oveflow: hide。根元素的 before 和 after 伪元素将存在于包装器外部，因此不会受到影响。

.before {
  width: 200px;
  margin: 30px;
  background-color: blue;
  height: 30px;
  position: relative;
}

.before:before {
  content: "221";
  color: blue;
  font-size: 15px;
  display: inline-block;
  position: absolute;
  left: -20px;
  top: -20px;
}

#ex2 > .wrapper {
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}

<div id='ex1' class='before'><div class="wrapper">Visible text with css before, more text, more and more... but </div></div>
<div id='ex2' class='before'><div class="wrapper">Hidden overflow text with css before... more and more text</div></div>