CSS before example

CSS before example

by Adi Jaya

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- example 1 -->
  <h2 class="demo">Lorem Ipsum example 1</h2>



<!-- example 2 -->
<i class="fa fa-file-text-o red"></i>
<span class="demo2">Lorem Ipsum dolor Sit Amet... example 2</span>

CSS

/*css example 1*/
.demo {
    position: relative;
    padding: 10px 0;
    border-bottom: 2px solid #cecaca;
}

.demo:before {
    font-family: fontawesome;
    content: "\f0c9";
    padding-right: 15px;
    color: #ef4d4d;
}
.demo:after {
    display: block;
    position: relative;
    width: 125px;
    height: 2px;
    margin-top: 5px;
    content: '';
    background: #fb6d88;
    top: 12px;
}



/*css example 2*/
.demo2 {
    padding-left:10px;
}
.demo2:after {
    display: block;
    position: relative;
    width: 125px;
    height: 2px;
    margin-top: 5px;
    content: '';
    background: #fb6d88;
    top: 12px;
}

/*optional*/
.demo2:hover:after, .demo:hover:after{
    background: blue;  
}
.red{
  color:red;
}