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)