Menu
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?
543
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.
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).
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.
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.
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
173
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.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
