CODEWITHSUNDEEP
htmlcssdisplay
Sarwan
Sarwan

Reputation: 657

block display in css for brfore and after pseudo selectors in a div

I am having a CSS file with below code:

.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;
}

And the html code is like below:

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

The output looks like below: enter image description here

But when I comment the display block line in before and after selectors, the output becomes like this:

enter image description here

I am not getting why the smaller blocks are shifting when I comment display block property. Can someone explain me in naive way please? Been trying to think for past one hour to get complete understanding of this behavior but unable to find proper reasoning about positioning of two smaller block elements with and without block display. Why the after block is not towards left but towards right of 'Loading' text?

The other question is that if we remove display as block, it becomes inline by default, then the three elements should be one after another, but I see first block overlapping in vertical line with the text.

Upvotes: 0

Views: 60

Answers (2)

kvncnls
kvncnls

Reputation: 261

display: block causes the element to take up the entire width a "new line". In this case, both your before and after squares are taking up their own lines and use up the whole width.

According to W3.org:

The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.

The initial value of the display property is inline .

Upvotes: 1

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

block holds them on the same block so when you remove it every will align absolutely but if you don't want to use display: block; you can simply align them to the left or right

.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;
  left: 0;
}

.loader::after {
  bottom: 0;
  left: 0;
}
<div class='loader'>Loading</div>

Upvotes: 1

Related Questions