If you want to add divider between two div or in between your content, then code below will help you: 
 
First we will create the div between the content or we can say that between two paragraph like <p> </p> div <p></p>. After this we will fix the height and align center the icon image which we are using in between the divider horizontal line. 
 
Now the code goes like this: 
HTML:
<div class="container">
	<p>This is my content	</p>
	 <div class="divider divider-center">
		<img src="valentines-heart.png" alt="heart">
	</div>
	<p>This is my bottom content</p>
</div>
CSS:
.container{
    width: 500px;
    margin: auto;
}
.divider {
    display: block;
    margin: 20px 0;
   	text-align: center;
   	min-height: 20px;
   	position: relative;
}
.divider::before {
    border-top: 1px solid #555;
    content: "";
	height: 0;
	left: 0;
    margin-right: 25px;
	position: absolute;
	right: 50%;
	top: 13px;
}
.divider::after {
	border-top: 1px solid #555;
	content: "";
    height: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 13px;
	left: 50%;
	margin-left: 25px;
	right: 0;
}
In the above code we have used after and before selectors as mentioned:
.divider::before {  ---> This will add the horizontal line to left side of the icon, by giving left 0 to it.
.divider::after {     ----> This will  add the horizontal line to right side of the icon by giving right 0 to it.
In this I have given a fixed amount of width i.e 50% on both side.
                       
                    
0 Comment(s)