Neat trick on CSS’s :before and :after pseudo elements

Suppose we have these HTML elements:

<div class="element1">Element1</div>
<div class="element2">Element2</div>

And suppose this is the CSS:

.element1, .element2 {
    display: inline;
}
.element1:before {
    content: '#';
  }
.element2:after {
    content: '#';
  }

We can expect to see two #’s between element1 and element2.

Now, change the #’s to spaces.

.element1, .element2 {
    display: inline;
}
.element1:before {
    content: ' ';
  }
.element2:after {
    content: ' ';
  }

Surprisingly, it only inserts one space between the elements. This can be handy when trying to ensure that there’s always a space between two elements. If one of this elements is not present, then the space is omitted. If you want to enforce two blank spaces between them, use ‘\00a0’.

.element1, .element2 {
    display: inline;
}
.element2:before {
    content: '\00a0';
  }

  .element1:after {
    content: '\00a0';
  }