I have a CSS file that contains the following code snippet:
.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;
}
Here is the corresponding HTML code:
<div class='loader'>Loading</div>
Initially, the output appears as shown in this image: https://i.stack.imgur.com/r5CKg.png
However, when I comment out the "display: block" property in the before and after selectors, the output changes to look like this: https://i.stack.imgur.com/YJkSS.png
I am perplexed by why the smaller blocks shift when the "display: block" property is removed. Can someone provide a simple explanation for me? I have been pondering over this for an hour but cannot grasp the reasoning behind the positioning of the two smaller block elements with and without the display block property. Why does the after block move to the right of the 'Loading' text instead of towards the left?
Additionally, if we remove the display property (defaulting to inline), shouldn't the three elements appear next to each other horizontally? However, I observe that the first block overlaps vertically with the text.