Replacement For Normal <hr> Tag

index.html

<div class="container">
  <div class="post">
    <h2>HOVER OVER LINE BREAK</h2>
    This can be used instead of line break it is fun and looks similar to gmail loading bar effect.
  </div>


  <div class="box">
            <div class="box-sm red"></div>
            <div class="box-sm orange"></div>
            <div class="box-sm yellow "></div>
    <div class="box-sm green "></div>
    <div class="box-sm blue "></div>
    <div class="box-sm purple"></div>
        </div>
</div>

Replacement For Normal <hr> Tag.markdown

Replacement For Normal

---

Tag

Can be used in place of

---

tag , More color can be added by just adding more boxes

A Pen by sanjeev yadav on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);

body{
  background-color:dimgrey;
}

.container{
  width:1300px;
  margin:0 auto;
}

.post{
  color:#fff;
  font-family: 'Open Sans', sans-serif;
  margin-bottom:50px;  
}

.box{
  width:1300px;
  height:8px;
  overflow:hidden;
  display: inline-flex;
}

.box-sm{
  min-width:200px;
  min-height:20px;
  height:20px;
  display:inline-block;
  margin:0;
}

.box-sm:hover{
	  transform: scale(15);
    transition: transform 1s ease-out;
}

.red{
  background-color:#FF5852;
}
.orange{
  background-color:#FF9000;
}
.yellow{
  background-color:#FFD300;
}

.green{
  background-color:#3DCD49;
}

.blue{
  background-color:#0089D7;
}

.purple{
  background-color:#9E44C4;
}