CSS: content:"\00a0"

Css

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

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

Solution 2 - Css

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSteDView Question on Stackoverflow
Solution 1 - CssSarfrazView Answer on Stackoverflow
Solution 2 - CssBen RoweView Answer on Stackoverflow