.circle-list li{ padding: 2.5em; border-bottom: 1px dashed #ccc; } .circle-list h2{ position: relative; margin: 0; } .circle-list p{ margin: 0; } .circle-list h2:before{ content: counter(li); counter-increment: li; position: absolute; z-index: -1; left: -1.3em; top: -.8em; background: #f5f5f5; height: 1.5em; width: 1.5em; border: .1em solid rgba(0,0,0,.05); text-align: center; font: italic bold 1em/1.5em Georgia, Serif; color: #ccc; border-radius: 1.5em; transition: all .2s ease-out; } .circle-list li:hover h2:before{ background-color: #ffd797; border-color: rgba(0,0,0,.08); border-width: .2em; color: #444; transform: scale(1.5); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter