SteD SteD - 1 year ago 181
CSS Question

CSS: content:"\00a0"

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download