CSS: content: "\ 00a0"

Question

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

content:"\00a0"; 

Checking this out on w3schools , he explains:

Definition and use

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

My question is: can you point me to a real world example of how we can use this content property? And what does \00a0 in this case?

Answer 1

I used it before to implement style in a floating 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> 

This will create something like

first element - second element - third element

This preserves the semantics of the markup, and I can represent the style of such a dash via css.

Answer 2

The content property is used to add content or even add html objects. As for \00a0 , this is the hex code for non-breaking space.

Resources

Additional Information
Javascript, CSS, and (X) HTML objects in numerical order