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
    • 1.43k
    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 :

    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!

    CSS content:\00a0

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: