溢出隐藏的问题

Question

有谁知道为什么overflow: hidden在以下示例中不起作用？ 我希望实现黑色条在.product-btn内滑动，如果有人在它上面徘徊。

.product-btn{
width: 250px;
height: 50px;
margin: 0 auto; 
text-align: center;
border: 1px solid #f39c12;
background-color: #fff;
transition: .5s ease-in-out;
overflow: hidden;

}
.product-btn:before{
content: " ";
position: absolute; 

left: -125px;
width: 250px;
height: 50px;
background-color: black;
transition: .5s ease-in-out;



}
.product-btn:hover:before {
left: 125px;

}

.product-btn-text{
 letter-spacing: 1px;
 
 
}
.product-btn: hover {
color: red;
z-index: 1;
cursor: pointer; 
}

<div class="product-btn">
<span class="product-btn-text">Text</span>
</div> 

Answer 1

因为您已将position:absolute设置为与您的文档相关的:before元素，而不是.product-btn。

这意味着您的:before元素超出了.product-btn。因此，应用overflow:hidden将无法在:before元素中使用

只需设置位置：相对于.product-btn

Stack Snippet

＆＃13;

＆＃13;

.product-btn {
  width: 250px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #f39c12;
  background-color: #fff;
  transition: .5s ease-in-out;
  overflow: hidden;
  position: relative;
}

.product-btn:before {
  content: " ";
  position: absolute;
  left: -125px;
  width: 250px;
  height: 50px;
  background-color: black;
  transition: .5s ease-in-out;
}

.product-btn:hover:before {
  left: 125px;
}

.product-btn-text {
  letter-spacing: 1px;
}

.product-btn: hover {
  color: red;
  z-index: 1;
  cursor: pointer;
}

＆＃13;

<div class="product-btn">
  <span class="product-btn-text">Text</span>
</div>

＆＃13;

＆＃13;

＆＃13;