溢出：隐藏不适用于伪元素

Question

我有一个红色正方形（@media only screen）和一个橙色条作为伪元素（div）。
我想要隐藏橙色栏的位于父方方框之外的部分，因此我在父方上使用了before，但是它不起作用。

overflow: hidden;

.square {
  width: 3.5em;
  height: 3.5em;
  
  background-color: red;
  overflow: hidden;
}

.square::before {
  content: "";
  position: absolute;
  transform: translate(2em);
  width: 4.95em;
  height: .65em;
  background-color: orange;
}

Answer 1

您需要将$type = explode(',', $_POST['type']); 设置为position: relative

.square

.square {
  width: 3.5em;
  height: 3.5em;
  position: relative; /* Added */
  background-color: red;
  overflow: hidden;
}

.square::before {
  content: "";
  position: absolute;
  transform: translate(2em);
  width: 4.95em;
  height: .65em;
  background-color: orange;
}

Answer 2

问题

伪元素当前相对于根定位。

解决方案

您需要使其相对于.square，而不是将position: relative;添加到.square。

.square {
  width: 3.5em;
  height: 3.5em;
  
  background-color: red;
  overflow: hidden;
Position:relative;
}

.square::before {
  content: "";
  position: absolute;
  transform: translate(2em);
  width: 4.95em;
  height: .65em;
  background-color: orange;
}

<div class="square"></div>