<分区>
<分区>
我有一个红色方 block (div) 和一个橙色条作为伪元素 (before)。
我想隐藏父方 block 之外的橙色栏部分，所以我在父方 block 上使用了 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;
}<div class="square"></div>最佳答案
您需要将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;
}<div class="square"></div>关于css - 溢出:隐藏不适用于伪元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51222184/