Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Types of Divider

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 10
    • 0
    • 796
    Comment on it

    Hello Reader

    This blog post will tell you how to make different types of divider between two HTML elements. There are total 10 dividers I will be providing here. The very first is a single line divider which we most commonly use. The second divider is the double line. The third is the dotted line. The fourth, fifth and sixth  is a single line with an icon on the left, a single line with an icon on the right and a single line with an icon in the center respectively. The seventh is the single line with an icon in short. The eighth, ninth and tenth is a single line with a circular icon in the left, in the right, and in the center respectively.

    The code below will help you with this.

    Single line:

    HTML:

    <div class="singleline-divider"></div>
    

    CSS:

    .singleline-divider{
        display: block;
        margin: 20px 0;
        min-height: 20px;
        position: relative;
    }
    .singleline-divider::after {
        border-top: 1px solid #ddd;
        content: "";
        height: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 8px;
    }

    Output:

    Double Line:

    HTML: 

    <div class="double-line"></div>
    

    CSS:

    .double-line{
        display: block;
        margin: 20px 0;
        min-height: 20px;
        position: relative;
    }
    .double-line::after {
        border-top: 1px solid #ddd;
        content: "";
        height: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 8px;
    }
    .double-line::before {
        border-top: 1px solid #ddd;
        content: "";
        height: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 5px;
    }
    

     

    output:

    Dotted Line:

    HTML:

    <div class="divider-dotted"></div>
    

    CSS:

    .divider-dotted{
        display: block;
        margin: 20px 0;
        min-height: 20px;
        position: relative;
    }
    .divider-dotted::after {
        border-top: 1px Dotted #ddd;
        content: "";
        height: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 8px;
    }
    

    output:

    Icon Left:

    HTML:

    <div class="divider-left">
    	<i class="fa fa-star-o" aria-hidden="true"></i>
    </div>
    

    CSS:

    .divider-left{
        display: block;
        margin: 20px 0;
        min-height: 20px;
        position: relative;
    }
    .divider-left::after {
        left: 30px;
        right: 0;
        border-top: 1px solid #ddd;
        content: "";
        position: absolute;
        top: 8px;
    }
    .divider-left i {
        color: #ccc;
        font-size: 18px;
        line-height: 1;
        float: left;
    }
    

    output:

    Icon Right

    HTML:

    <div class="divider-right">
    	<i class="fa fa-star-o" aria-hidden="true"></i>
    </div>
    

    CSS:

    .divider-right{
        display: block;
        margin: 20px 0;
        min-height: 20px;
        position: relative;
    }
    .divider-right::after {
        left: 0;
        border-top: 1px solid #ddd;
        content: "";
        position: absolute;
        right: 30px;
        top: 8px;
    }
    .divider-right i {
        color: #ccc;
        font-size: 18px;
        line-height: 1;
        float: right;
    }
    

    output:

    Icon Center:

    HTML:

    <div class="divider-center">
             <i class="fa fa-heart-o"></i>
    </div>
    

    CSS:

    .divider-center {
        display: block;
        margin: 20px 0;
        min-height: 20px;
        position: relative;
          text-align: center;
    }
    .divider-center::before {
        border-top: 1px solid #ddd;
        content: "";
        height: 0;
        left: 0 !important;
        margin-right: 20px;
        position: absolute;
        right: 50%;
        top: 8px;
    }
    .divider-center::after {
        left: 50% !important;
        margin-left: 20px;
        right: 0;
        border-top: 1px solid #ddd;
        content: "";
        height: 0;
        position: absolute;
        top: 8px;
    }
    

    output:

    Icon Center Short:

    HTML:

    <div class="divider-short">
    	<i class="fa fa-heart-o"></i>
    </div>
    

    CSS:

    .divider-short {
        display: block;
        margin: 20px 0;
        min-height: 20px;
        position: relative;
        text-align: center;
    }
    .divider-short::before {
        left: auto !important;
        margin-right: 20px;
        right: 50%;
        width: 15%;
        position: absolute;
        content: "";
        height: 0;
        border-top: 1px solid #ddd;
        top: 8px;
    }
    .divider-short::after {
        left: 50% !important;
        margin-left: 20px;
        right: auto !important;
        width: 15%;
        border-top: 1px solid #ddd;
        content: "";
        height: 0;
        position: absolute;
        top: 8px;
    }
    

    output:

    Icon Left in circle:

    HTML:

    <div class="divider-left-circle">
     	<i class="fa fa-star-o"></i>
    </div>
    

    CSS:

    .divider-left-circle {
        display: block;
        margin: 20px 0;
        min-height: 20px;
        position: relative;
    }
    .divider-left-circle::after {
        left: 50px;
        right: 0;
        border-top: 1px solid #ddd;
        content: "";
        position: absolute;
        top: 8px;
    }
    .divider-left-circle i {
        background-color: #f5f5f5;
        border-radius: 50%;
        color: #999;
        height: 40px;
        line-height: 40px;
        margin-top: -11px;
        text-align: center;
        width: 40px;
        z-index: 1;
        float: left;
    }
    

    output:

    Icon Right in Circle:

    HTML:

    <div class="divider-right-circle">
    	<i class="fa fa-star-o"></i>
    </div>
    

    CSS:

    .divider-right-circle {
        display: block;
        margin: 20px 0;
        min-height: 20px;
        position: relative;
    }
    .divider-right-circle::after {
        left: 0;
        right: 50px;
        border-top: 1px solid #ddd;
        content: "";
        position: absolute;
        top: 8px;
    }
    .divider-right-circle i {
        background-color: #f5f5f5;
        border-radius: 50%;
        color: #999;
        height: 40px;
        line-height: 40px;
        margin-top: -11px;
        text-align: center;
        width: 40px;
        z-index: 1;
        float: right;
    }
    

    output:

    Icon center in Circle:

    HTML

    <div class="divider-center-circle">
    	<i class="fa fa-star-o"></i>
    </div>
    

    CSS:

    .divider-center-circle {
        display: block;
        margin: 20px 0;
        min-height: 20px;
        position: relative;
        text-align: center;
    }
    .divider-center-circle::after {
        border-top: 1px solid #ddd;
        content: "";
        height: 0;
        left: 50%;
        margin-left: 30px;
        position: absolute;
        right: 0;
        top: 8px;
    }
    .divider-center-circle::before {
        border-top: 1px solid #ddd;
        content: "";
        height: 0;
        left: 0 !important;
        margin-right: 30px;
        position: absolute;
        right: 50%;
        top: 8px;
    }
    .divider-center-circle i {
        background-color: #f5f5f5;
        border-radius: 50%;
        color: #999;
        height: 40px;
        line-height: 40px;
        margin-top: -11px;
        text-align: center;
        width: 40px;
        z-index: 1;
    }
    

    output:

    I have attached the full code packet at the bottom 

     

    Types of Divider

 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: