<img src="http://southparkstudios.mtvnimages.com/shared/characters/non-human/underpants-gnomes.png" alt="underpants gnomes" class="spg"/>
<ol class="mylist reversed">
<li>
<h3>Collect Underpants</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptas, aut modi et inventore rem praesentium ab ipsam, accusantium suscipit iure facere omnis mollitia eligendi maxime perferendis explicabo sint sequi.</p>
</li>
<li>
<h3>...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptas, aut modi et inventore rem praesentium ab ipsam, accusantium suscipit iure facere omnis mollitia eligendi maxime perferendis explicabo sint sequi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus sint deserunt quos officia ut deleniti officiis nobis quam itaque sed, illum asperiores labore temporibus. Cumque quo, illum ut optio unde!</p>
</li>
<li>
<h3>Profit!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptas, aut modi et inventore rem praesentium ab ipsam, accusantium suscipit iure facere omnis mollitia eligendi maxime perferendis explicabo sint sequi.</p>
</li>
</ol>
body{
font-family: sans-serif;
}
.spg{
display:block;
width:320px;
margin:auto;
}
.mylist{
position:relative;
counter-reset: steps 4;
list-style-type: none ;
padding:0;
display: block;
margin:auto;
text-align: center;
}
.mylist::before{
content: "";
position:relative;
display: none;
border-bottom: 2px solid black;
width: 730px;
margin:auto;
top:54px;
}
.mylist li{
display:inline-block;
padding:15px;
vertical-align: top;
position:relative;
}
.mylist li::before{
display:block;
content: counter(steps);
counter-increment: steps -1;
border:2px solid black;
border-radius:35px;
background:#E7FF9B;
width:50px;
height: 50px;
margin: 10px auto;
line-height:50px;
text-align:center;
font-size:32px;
box-shadow:0px 4px 5px rgba(0, 0, 0, .6);
}
@media(min-width:1100px){
.mylist li{
display:inline-block;
width:300px;
margin:0 15px 15px 0;
border-radius:10px;
padding:15px;
}
.mylist:before {
display:block;
}
/* .mylist li:after{
display:block;
content: "";
border-bottom:2px solid #bada55;
width:200px;
position: absolute;
top:50px;
margin-left:-125px;
} */
.mylist li:first-child:after{
display:none;
}
}
// Forked from Jay Wolters:
// https://codepen.io/jaywolters/pen/RrYmMm
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.