Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • CSS content:\00a0

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2
    • 0
    • 3.51k
    Comment on it

    Hey there!

    Today, while using Bootstrap breadcrumb, I came across something which I never did see before. The syntax is given as under :



    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>


    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,


    This way you can add any icon you want to.

    Keep Coding!

    CSS content:\00a0

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: