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

This blog is part of 1 Tute Sets.

CSS
Tute set by SENNA_BR
1 Blogs
  • How to add divider with Icons using css

    • 1/1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.36k
    Comment on it

    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)

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: