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