CSS

Many of site you have seen that there is menu separator uses like simple bar, so in this tutorial we can see how we can do that by just using css, like the below image example

image

So for doing this there 2 ways first with before and after property and second with border property of css

1) Using Before and After Property of Css

Suppose this is html 

<ul class="menu-items">
    <li class="menu-leaf"><a href="#">Home</a></li>
    <li class="menu-leaf"><a href="#">Dashboard</a></li>
    <li class="menu-leaf"><a href="#">About</a></li>
    <li class="menu-leaf"><a href="#">Contact</a></li>
    <li class="menu-leaf"><a href="#">Locations</a></li>
  </ul>

And This is css

.menu-items li::after {
        content: "|";
        float: right;
        color: black;
        padding-left: 10px;
        font-size: 20px;
        font-weight: bold;
        padding-right: 8px;
    }
    .menu-items li:last-child::after{
        display: none;
    }

.menu-items {
        list-style: none;
        background: lightblue;
        padding: 20px;
    }
    li.menu-leaf {
        display: inline-block;
    }
    li.menu-leaf a {
        color: black;
        font-size: 20px;
        text-decoration: none;
    }

And 2) using Border property 

HTML as same point 1)

CSS

.menu-items li:last-child {
        border-right: none
        }
    .menu-items {
        list-style: none;
        background: lightblue;
        padding: 20px;
    }
    li.menu-leaf {
        display: inline-block;
        border-right: 1px solid black;
        padding: 0 10px;
    }
    li.menu-leaf a {
        color: black;
        font-size: 20px;
        text-decoration: none;
    }

 

This are two quick ways to achieve the separator between the menu items.


Please Comment your thoughts and feedback below and add something if you found good in anywhere to help others

Hit a like Button If you like the Post.

Many Thanks