CSS: content:"\00a0"

Question

Today I came across a new CSS syntax that I have never seen before

content:"\00a0";

Checking it on w3schools, it explains:

Definition and Usage

The content property is used with the :before and :after pseudo-elements, to insert generated content.

My question is, can you point out to me in real world example, how do we use this 'content' syntax? And what does the \00a0 mean in this case?

Answer 1

The content property is used to add content or even adding html entities. As for \00a0, it is hex code for a non-breaking space.

Resources:

More Information
Javascript, CSS, and (X)HTML entities in numeric order

Answer 2

I've used it before to implement styling text on a floated list

<style>
  #horz-list li {
    float: left;
  }

  #horz-list li:after {
    content: "\00a0-\00a0";
  }

   #horz-list li:last-child:after {
    content: "";
  }
</style>

<ul id="horz-list">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

That will produce something like

first item - second item - third item

This keeps my markup semantic & I can introduce styling such a the dash via css.