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.
Created
July 31, 2016 11:00
-
-
Save CodeMyUI/fe546f0c2f2735e6df432baa0cf98508 to your computer and use it in GitHub Desktop.
Styling CSS Counters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment