Css 在浏览器中检查元素之前，转换不会完成

我试图做一些类似于当用户将窗口调整为小宽度时菜单打开按钮的事情：使跨距从水平线旋转成十字

HTML

---

奇怪的是，直到我右键单击->检查元素，“X”形状才正确形成。然后它迅速成形。关闭检查窗口也会触发此操作。然而，价值观似乎解决了这个问题。为什么会发生这种情况？

考虑将伪元素包含在框中，而不是跨距中。需要抛光

<div class="navigation">
    <a href="#"><span></span></a>
</div>

.navigation a > span,
.navigation a > span::before,
.navigation a > span::after {
    width: 30px;
    height: 5px;
    transition: all 0.8s;
    background-color: gray;
}

.navigation a > span::before, .navigation a > span::after {
    content: " ";
    margin-top: -10px;
    margin-left: 0;
}
.navigation a > span::after {
    margin-top: 10px;
}

.navigation a.selected > span {
    -webkit-transform: rotate(45deg) translate(1px);
}
.navigation a.selected > span::before {
    background-color: white;
    -webkit-transform: rotate(-90deg) translate(20px, -1px);
}
.navigation a.selected > span::after {
    display: none;
}