Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: content:"\00a0"

Tags:

css

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?

like image 543
SteD Avatar asked May 05 '10 04:05

SteD


People also ask

What is content\ 00a0?

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.

How do I use special characters in CSS?

Special characters in CSSEither you use the Unicode code point — for example, the plus sign ( + ) is U+002B, so if you would want to use it in a CSS selector, you would escape it into \2b (note the space character at the end) or \00002b (using exactly six hexadecimal digits).

How do I add a non-breaking space in CSS?

When you insert the   character between such words, it will render a space and will never let any of the words break into a new line. You can see that the $2 Trillion breaks, which does not look good as it might confuse the reader.

What is &amp NBSP?

Updated on February 20, 2020. In computer programming, NBSP means: Non-Breaking Space. This is an HTML character you may have seen online. It may appear as " " and it tells a web browser to create a space between two words without going to the next line.


2 Answers

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

like image 173
Sarfraz Avatar answered Sep 19 '22 09:09

Sarfraz


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.

like image 21
Ben Rowe Avatar answered Sep 18 '22 09:09

Ben Rowe