Skip to content

Instantly share code, notes, and snippets.

@Dianakc
Created August 1, 2013 21:09
Show Gist options
  • Save Dianakc/3d3d73139c64942c0669 to your computer and use it in GitHub Desktop.
Save Dianakc/3d3d73139c64942c0669 to your computer and use it in GitHub Desktop.
A couple of tips: If you want a bigger circle, change either font-size to enlarge everything by the same amount (both text and circle) or width, line-height and the border-radius' to only affect the circle (border-radius = half of the width and line-height values). To center the circle with other text, place it in an element where you set a line…
span.step {
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment