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 property? And what does the \00a0 mean in this case?

Answer 1

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

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

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

 #horz-list li:last-child:after {
  content: "";
}

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