：before和：after内容与父元素可见性问题

Question

我有一个容器div，其input type="checkbox"使用::before和::after添加了伪元素。

function hiding() {
    var child = document.getElementById("child");
    child.style.visibility = "hidden";
}
var hide = document.getElementById("hide");
hide.addEventListener("click", hiding);

function showing() {
    var child = document.getElementById("child");
    child.style.visibility = "visible";
}
var show = document.getElementById("show");
show.addEventListener("click", showing);

div {
    padding: 10px;
    border: 2px solid black;
    background-color: green;
}
div div {
    position: relative;
    top: 50px;
    background-color: white;
}
#parent {
    height: 150px;
}
#child {
    visibility: visible;
}
input[type=checkbox].toggle_switch::after {
    content:'';
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb);
    border: 1px solid #919191;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #f0f0f0;
    -webkit-transition: 1s all linear;
}
input[type=checkbox].toggle_switch::before {
    content:'OFF';
    margin: 0;
    padding: 0;
    width: 38px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 18px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    font: 700 14px sans-serif;
    line-height: 22px;
    color: #7f7f7f;
    text-shadow: none;
    background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6;
    border-color: #7d7d7d;
}
input[type=checkbox].toggle_switch {
    -webkit-appearance: none;
    padding: 0;
    width: 58px;
    height: 22px;
    position: relative;
    border-radius: 3px 0 0 3px;
    -webkit-transition: 1s all linear;
    vertical-align: text-top;
}
input[type=checkbox].toggle_switch:checked::after {
    left: 36px;
}
input[type=checkbox].toggle_switch:checked::before {
    content:'ON';
    left: 0px;
    color: #fff;
    text-shadow: 0 -1px 0 #1b3b6f;
    background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    box-shadow: inset 0 2px 2px #2a5bb3, inset -3px 0 3px #2a5bb3;
    border-color: #1654b5;
}

<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
<div id="parent">
    <div id="child">
        <input type="checkbox" class="toggle_switch" />
        <input type="checkbox" class="toggle_switch" />
        <input type="checkbox" class="toggle_switch" checked/>
        <input type="checkbox" class="toggle_switch" />
    </div>
</div>

JSFiddle Example注意：目前仅为webkit编写。

使用JavaScript将容器元素的CSS可见性属性从“可见”更改为“隐藏”。这种情况似乎只是在从“可见”变为“隐藏”时发生，而不是相反。

在消失之前，伪元素会保持可见状态。

切换可见性时是否可以防止伪元素延迟？

PS：如果你能告诉我如何让这个工作IE和Firefox（我知道我在这个例子中只有webkit标签，但是我需要做些什么来解决它？），你将获得我永恒的感激。 / p>