为什么 ：：after 和 ：:p seudo 不与主元素对齐？

Question

我正在尝试使用伪元素创建一个简单的汉堡菜单。然而，我遇到了两个问题：

1. ：：before和：after有点偏右(相对于主元素(，我完全不知道为什么

2. 当我没有将高度设置为.minimize-menu div时，它会自动设置为4px。为什么会发生这种情况(我的意思是，为什么不是5、6或7像素(？

body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.minimize-menu {
/*     position: relative;
*/
display: flex;
justify-content: center;
align-items: center;
/*     top: 20px;
right: 20px; */
width: 15%;
height: 25px;
}
.minimize-menu div {
/*     position: relative;
*/
width: 30%;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 1px;
background-color: rgba(255, 255, 255);
}
.minimize-menu div::before,
.minimize-menu div::after {
content: "";
display: block;
position: relative;
width: 100%;
top: -10px;
left: 0;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 1px;
background-color: rgba(255, 255, 255);
}
.minimize-menu div::after {
top: 10px;
}

<div class="minimize-menu">
<div></div>
</div>

https://jsfiddle.net/vowtz/deLqav9c/19/

Answer 1

对于您的第一个问题，这是因为您的div周围有一个边界，而您的伪元素在其中。所以你可以在你的伪元素上设置一个负左边；

第二个问题是，因为您的minimize-menu div是一个灵活的子元素，所以伪元素本质上是将父框高度设置为6px，因为它们的边界大小——因为伪元素是子元素。

您可以通过移除伪元素进行测试，您会看到div只有2倍高——因为它的边界。

我正在寻找解释这一点的MDN，以便将其添加到答案中。

body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.minimize-menu {
display: flex;
justify-content: center;
align-items: center;
width: 15%;
height: 25px;
}
.minimize-menu div {
width: 30%;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 1px;
background-color: rgba(255, 255, 255);
}
.minimize-menu div::before,
.minimize-menu div::after {
content: "";
display: block;
position: relative;
width: 100%;
top: -10px;
left: -1px;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 1px;
background-color: rgba(255, 255, 255);
}
.minimize-menu div::after {
top: 10px;
}

<div class="minimize-menu">
<div></div>
</div>

Answer 2

你的边界影响了这里的很多东西，这就是为什么你有4倍的身高。此外，您可以在.minimize-menu div上设置position: relative，在psuedo元素上设置position: absolute;。您需要为psuedo上的left设置一个负值。请参阅此处：

body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.minimize-menu {
/*     position: relative;
*/
display: flex;
justify-content: center;
align-items: center;
/*     top: 20px;
right: 20px; */
width: 15%;
height: 25px;
}
.minimize-menu div {
/*     position: relative;
*/
width: 30%;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 1px;
background-color: rgba(255, 255, 255);
position: relative;
}
.minimize-menu div::before,
.minimize-menu div::after {
content: "";
display: block;
position: absolute;
width: 100%;
top: -10px;
left: -1px;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 1px;
background-color: rgba(255, 255, 255);
}
.minimize-menu div::after {
top: 10px;
}

<div class="minimize-menu">
<div></div>
</div>