CSS3 Topics

How to design Title Divider !!

September 07, 2019


In this article you can find , about how to design title dividers .. dividers are the class attributes having in html elements, using these class attributes you can create title dividers, here you can see that class attributes 
  • divider
  • divider-dash
  • divider-icon
you need to write this class attributes like this..


    <div class="divider">
        <div class="divider-dash"></div>
        <div class="divider-icon">
            <i class="fa fa-star fa-2x"></i>
        </div>
        <div class="divider-dash"></div>
    </div>




for this HTML Class attributes, you need to write this CSS


    <style>
          .divider{
            display: flex;
            align-items: center;
            justify-content: center;

        }
        .divider-dash{
            background-color: darkgray;
            width: 125px;
            height: 10px;
        }
        .divider .divider-icon{
            padding: 5px;
        }

    </style>
   

to insert the font icons , i used font awesome CDN

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
finally you can see the output