Html 在css中为div中的brfore和after伪选择器显示块

我有一个CSS文件，代码如下：

.loader {
    width: 250px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: helvetica, arial, sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    color: white;
    background-color: gray;
    letter-spacing: 0.2em;
}

.loader::before, .loader::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background:blue;
    position: absolute;
    /* animation: load .7s infinite alternate ease-in-out; */
}

.loader::before {
    top: 0;
}

.loader::after {
    bottom: 0;
}

html代码如下所示：

<div class='loader'>Loading</div>

加载

输出如下所示：

但当我在选择器前后注释显示块行时，输出如下：

我不明白为什么在注释显示块属性时较小的块会移动。有人能用天真的方式给我解释一下吗？在过去的一个小时里，我们一直在努力思考，以完全理解这种行为，但无法找到关于两个较小的块元素（带块显示和不带块显示）定位的正确推理。为什么后置块不是朝向“加载”文本的左侧，而是朝向“加载”文本的右侧

---

另一个问题是，如果我们删除display as block，默认情况下它会变成inline，那么这三个元素应该是一个接一个的，但我看到第一个块与文本垂直重叠。

block

将它们保持在同一个块上，因此当您删除它时，每个块都将绝对对齐，但如果您不想使用

显示：block

您只需将它们与

左侧

或

右侧

.loader{
宽度：250px；
高度：50px；
线高：50px；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体系列：helvetica、arial、无衬线字体；
文本转换：大写；
字号：900；
颜色：白色；
背景颜色：灰色；
字母间距：0.2米；
}
.loader：：之前，
.loader：：之后{
内容：“；
/*显示：块*/
宽度：15px；
高度：15px；
背景：蓝色；
位置：绝对位置；
/*动画：加载.7s无限交替缓进缓出*/
}
.loader：：之前{
排名：0；
左：0；
}
.loader：：之后{
底部：0；
左：0；
}

---

加载

块

将它们保持在同一块上，因此当您删除它时，每个块都将绝对对齐，但如果您不想使用

显示：块

您只需将它们与

左侧

或

右侧

.loader{
宽度：250px；
高度：50px；
线高：50px；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体系列：helvetica、arial、无衬线字体；
文本转换：大写；
字号：900；
颜色：白色；
背景颜色：灰色；
字母间距：0.2米；
}
.loader：：之前，
.loader：：之后{
内容：“；
/*显示：块*/
宽度：15px；
高度：15px；
背景：蓝色；
位置：绝对位置；
/*动画：加载.7s无限交替缓进缓出*/
}
.loader：：之前{
排名：0；
左：0；
}
.loader：：之后{
底部：0；
左：0；
}

---

加载

显示：块

使元素占据“新行”的整个宽度。 在这种情况下，您的

前

和

后

方块都占据了它们自己的线条，并占用了整个宽度

根据：

：before和：after伪元素从它们所附加到的文档树中的元素继承任何可继承的属性

---

.

显示：块

使元素占据“新行”的整个宽度。 在这种情况下，您的

前

和

后

方块都占据了它们自己的线条，并占用了整个宽度

根据：

：before和：after伪元素从它们所附加到的文档树中的元素继承任何可继承的属性

---

.

请包含所包含CSS适用的HTML。您可以使用（编辑器工具栏中的图标看起来像

）提供一个HTML。它只是一个

div

标签<代码>加载请包括应用所含CSS的HTML。您可以使用（编辑器工具栏中的图标看起来像

）提供一个HTML。它只是一个

div

标签<代码>加载我仍然不明白的是，如果我们删除display as block，第一个块怎么会与文本重叠（垂直线）。文本应该在第一个块之后。我仍然不明白的是，如果我们删除display as block，为什么第一个块会与文本重叠（垂直线）。文本应该在第一个块之后。我仍然不明白的是，如果我们删除display as block，为什么第一个块会与文本重叠（垂直线）。文本应该在第一个块之后。我仍然不明白的是，如果我们删除display as block，为什么第一个块会与文本重叠（垂直线）。文本应该在第一个块之后。