Hey there!
Today, while using Bootstrap breadcrumb, I came across something which I never did see before. The syntax is given as under :
content:"\00a0";
I was using Bootstrap breadcrumb and I found the above syntax there. The entire CSS is :
.breadcrumb > li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
I assumed it as some sort of default separator that comes in between the breadcrumb list items. The default separator appears as shown below :

But my main concern was to know what it actually meant and how it works? Also, if there was a way to change the default separator?
I got the following results to my question.
The content
property is used to add content. It is used with the :before and :after pseudo-elements. Speaking for \00a0
, it is hexadecimal code for a non-breaking space. So, the combined code provides a non-breakable space between the two list items in breadcrumb.
Just to be sure, I then used it as follows.
HTML :
<ul id="horz-list">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
CSS :
#horz-list li {
float: left;
}
#horz-list li:after {
content: "\00a0-\00a0";
}
#horz-list li:last-child:after {
content: "";
}
OUTPUT :

You can see a space before and after the list items. This is what content:"\00a0";
does.
Now, changing the separator requires you to add that required icon in the content. For example,
content:">";
This way you can add any icon you want to.
Keep Coding!
0 Comment(s)