CSS navigation by using pseudo elements, slash separators(css:before)

Look at the effect of the first:
css3

Began to cut the first picture, the first problem is the top navigation bar here, with a slash. Thought of the idea is to use pseudo class: : before or after the implementation

Write HTML structure.

<!-- begin -->  
    <div class="header_right fr">  
    <a href="#" class="link">Home</a>  
    <a href="#" class="link">About</a>  
    <a href="#" class="link">Features</a>  
    <a href="#" class="link">Blog</a>  
    <a href="#" class="link">Shop</a>  
    <div class="alarm fr">  
    <img src="./images/alarm.png" alt="alarm" /></images><i class="alarm_number">2</i>  
    </div>  
    </div>  
 <!-- end -->

CSS:

    .link:before{content: "/";margin:0 24px;color: grey;}   
    .link:first-child:before{display:none;}

Use: first bofore, set the content is “/”, margin, before and after the color. Reoccupy first before – the child will be the first element of pseudo-classes are removed.

No Comments

Leave a Reply