隐藏伪元素的溢出

Question

我制作了一个花哨的复选框，它使用伪元素看起来不错，但不幸的是overflow: hidden在它的情况下效果不佳。我不知道为什么。

这是我的代码：

＆＃13;

＆＃13;

.wrapper {
  background: black;
}

.priority {
    display: none;

}
.priority, .priority:after, .priority:before, .priority *, .priority *:after, .priority *:before, .priority + .priority-btn {
    box-sizing: border-box;
}

.priority + .priority-btn {
    overflow: hidden;
    backface-visibility: hidden;
    transition: all 0.2s ease;
    background: #666;
    width: 100%;
    border-radius: 0.25rem;
    padding: .375rem .75rem;
    height: 2.375em;
}

.priority + .priority-btn::after, .priority + .priority-btn::before {
    display: inline-block;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    font-weight: bold;
    color: #fff;
}

.priority + .priority-btn::after {
    left: 100%;
    content: 'IMPORTANT';
}

.priority + .priority-btn::before {
    left: 0;
    content: 'UNIMPORTANT';
}

.priority + .priority-btn:active {
    background: #888;
}

.priority + .priority-btn:active::before {
    left: -10%;
}

.priority:checked + .priority-btn {
    background: #86d993;
}
.priority:checked + .priority-btn:before {
    left: -100%;
}
.priority:checked + .priority-btn:after {
    left: 0;
}
.priority:checked + .priority-btn:active:after {
    left: 10%;
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col">
        <input type="checkbox" ngModel name="priority" id="priority" class="priority">
        <label class="priority-btn" for="priority"></label>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

正如您所见，文本来自容器标签。

Answer 1

将position: relative提供给.priority-btn，因为其伪元素有position: absolute：

.wrapper {
  background: black;
}

.priority {
    display: none;

}
.priority, .priority:after, .priority:before, .priority *, .priority *:after, .priority *:before, .priority + .priority-btn {
    box-sizing: border-box;
}

.priority + .priority-btn {
    overflow: hidden;
    backface-visibility: hidden;
    transition: all 0.2s ease;
    background: #666;
    width: 100%;
    border-radius: 0.25rem;
    padding: .375rem .75rem;
    height: 2.375em;
    position: relative;
}

.priority + .priority-btn::after, .priority + .priority-btn::before {
    display: inline-block;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    font-weight: bold;
    color: #fff;
    z-index: 11;
}

.priority + .priority-btn::after {
    left: 100%;
    content: 'IMPORTANT';
}

.priority + .priority-btn::before {
    left: 0;
    content: 'UNIMPORTANT';
}

.priority + .priority-btn:active {
    background: #888;
}

.priority + .priority-btn:active::before {
    left: -10%;
}

.priority:checked + .priority-btn {
    background: #86d993;
}
.priority:checked + .priority-btn:before {
    left: -100%;
}
.priority:checked + .priority-btn:after {
    left: 0;
}
.priority:checked + .priority-btn:active:after {
    left: 10%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col">
        <input type="checkbox" ngModel name="priority" id="priority" class="priority">
        <label class="priority-btn" for="priority"></label>
      </div>
    </div>
  </div>
</div>

Answer 2

将overflow:hidden添加到您的.col班级

.col{
      overflow: hidden;

}