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

You can find more code here http://css-tricks.com/snippets/html/glyphs/ — NoWar, May 06 '14 at 13:40
[`NO-BREAK SPACE`](https://www.fileformat.info/info/unicode/char/00a0/index.htm) — vsync, Jul 04 '18 at 08:30

score 61 · Answer 1 · edited May 23 '17 at 12:10

61

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

edited May 23 '17 at 12:10

Community

1
1

answered May 05 '10 at 04:50

Sarfraz

377,238
77
533
578

score 32 · Accepted Answer · edited Feb 16 '18 at 13:37

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.

CSS: content:"\00a0"

2 Answers2

Linked

Related