Created
August 22, 2014 17:09
-
-
Save cron64/9259902644d0694eff60 to your computer and use it in GitHub Desktop.
CSS: Style OL
This file contains 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
.tipItem ol | |
{ | |
counter-reset:li; /* Initiate a counter */ | |
margin-left:0; /* Remove the default left margin */ | |
padding-left:0; /* Remove the default left padding */ | |
} | |
.tipItem ol li | |
{ | |
position:relative; /* Create a positioning context */ | |
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */ | |
padding:4px 8px; /* Add some spacing around the content */ | |
list-style:none; /* Disable the normal item numbering */ | |
border-top:2px solid #666; | |
background:#f6f6f6; | |
} | |
.tipItem ol li:before | |
{ | |
content:counter(li); /* Use the counter as content */ | |
counter-increment:li; /* Increment the counter by 1 */ | |
/* Position and style the number */ | |
position:absolute; | |
top:-2px; | |
left:-2em; | |
-moz-box-sizing:border-box; | |
-webkit-box-sizing:border-box; | |
box-sizing:border-box; | |
width:2em; | |
/* Some space between the number and the content in browsers that support | |
generated content but not positioning it (Camino 2 is one example) */ | |
margin-right:8px; | |
padding:4px; | |
border-top:2px solid #666; | |
color:#fff; | |
background:#666; | |
font-weight:bold; | |
font-family:"Helvetica Neue", Arial, sans-serif; | |
text-align:center; | |
color: #FFF400; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment