Stylish Typography Effect

<div class="container">

<h2>Main Header</h2>

<ul>

    <li>

        <h3><span>First Header</span></h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius adipisci, sed libero. Iste asperiores suscipit, consequatur debitis animi impedit numquam facilis iusto porro labore dolorem, maxime magni incidunt delectus est!</p>

    </li>

    <li>

        <h3><span>Second Header</span></h3>

        <p>Totam at eius excepturi deleniti sed, error repellat itaque omnis maiores tempora ratione dolor velit minus porro aspernatur repudiandae labore quas adipisci esse, nulla tempore voluptatibus cupiditate, provident, atque.</p>

    </li>

    <li>

        <h3><span>Third Header</span></h3>

        <p>Possimus deserunt nisi perferendis, consequuntur odio et aperiam, est, dicta dolor itaque sunt laborum, magni qui optio illum dolore laudantium similique harum. Eveniet quis, libero eligendi delectus repellendus repudiandae ipsum.</p>

    </li>

    <li>

        <h3><span>Fourth Header</span></h3>

        <p>Vel nam odio dolorem, voluptas sequi minus quo tempore, animi est quia earum maxime. Reiciendis quae repellat, modi non, veniam natus soluta at optio vitae in excepturi minima eveniet dolor debitis inventore ad eveniet.</p>

    </li>

</ul>

</div>

@import url(https://fonts.googleapis.com/css?family=Raleway|Open+Sans);

*{

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

.container{

    margin: 3m auto;

    width: 90%;

    max-width: 1100px;

}

h2{

    position: relative;

    font-family: 'Raleway', sans-serif;

    font-size: 1eml

    font-weight: 400;

    text-transform: uppercase;

    color: #959595;

}

h2:after{

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -10px;

    border-bottom: 3px solid #d7ebba;

    width: 30px;

}

ul{

    list-style: none;

    margin: 4em 0 0;

    padding: 0;

}

ul:after{

    clear: both;

    content: "";

    display: table;

}

ul li{

    margin-bottom: 2em;

}

@media only screen and (min-width: 700px){

    ul li{

        float: left;

        width: 47.5%;

        margin-right: 5%;

    }

    ul li:nth-child(2n){

        margin-right: 0;

    }

}

ul li h3{

    position: relative;

    z-index: 1;

    margin: 0;

    font-family: 'Open Sans', sans-serif;

    font-size: 1.25em;

    line-height: 2.5em;

    font-weight: 300;

    letter-spacing: 1px;

}

ul li h3:before{

    content: "";

    position: absolute;

    z-index: -1;

    background-color: #d7ebba;

    width: 2.5em;

    height: 2.5em;

    border-radius: 50%;

}

ul li h3 span{

    padding-left: 15px;

}

ul li p{

    padding-left: 15px;

    font-family: 'Raleweay', sans-serif;

    font-size: 1.1em;

    line-height: 1.6875em;

    font-weight: 400;

    color: #959595;

}