Styling elements using CSS counters; for more details check out the quick tip on Envato Tuts+
By George
A Pen by Envato Tuts+ on CodePen.
<ol> | |
<li> | |
<h4>List Item</h4> | |
<p>Qui dolorem ipsum quia dolor sit amet, consectetur nobis est eligendi optio cumque nihil impedit.</p> | |
</li> | |
<li> | |
<h4>List Item</h4> | |
<p>Et iusto odio dignissimos ducimus qui blanditiis praesen voluptatum deleniti Itaque earum rerumsapiente delectus.</p> | |
</li> | |
<li> | |
<h4>List Item</h4> | |
<p>Dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ducimus qui blanditiis.</p> | |
<p>Ut enim ad minima veniam, amet, consectetur, adipisci velit, ducimus qui blanditiis.</p> | |
</li> | |
<li> | |
<h4>List Item</h4> | |
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.</p> | |
</li> | |
</ol> |
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); | |
ol, li, p, h4 { | |
margin: 0; | |
} | |
body { | |
background: #fbf10f; | |
max-width: 80%; | |
width: 500px; | |
margin: 40px auto; | |
font: normal 16px/24px "Montserrat", "Helvetica Neue", sans-serif; | |
} | |
h3 { | |
font-size: 1.65rem; | |
margin: 15px 0; | |
text-align: center; | |
} | |
ol { | |
counter-reset: section; | |
} | |
li { | |
list-style-type: none; | |
position: relative; | |
font-size: 1.5rem; | |
padding: 15px; | |
margin-bottom: 15px; | |
background: #0e0fee; | |
color: #fff; | |
} | |
h4 { | |
position: relative; | |
padding-bottom: 10px; | |
} | |
h4:after { | |
content: ''; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
width: 25px; | |
height: 2px; | |
background: white; | |
} | |
p { | |
font-size: .9rem; | |
line-height: 1.4rem; | |
margin-top: 15px; | |
} | |
li::before { | |
counter-increment: section; | |
content: counter(section); | |
text-align: center; | |
display: inline-block; | |
color: #000; | |
border-radius: 50%; | |
position: absolute; | |
left: -65px; | |
top: 50%; | |
transform: translateY(-50%); | |
padding: 12px; | |
font-size: 2rem; | |
width: 25px; | |
height: 25px; | |
border: 2px solid #000; | |
} |
Styling elements using CSS counters; for more details check out the quick tip on Envato Tuts+
By George
A Pen by Envato Tuts+ on CodePen.