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!