Die ol in diesem Beispiel muss natürlich die Klasse rounded-list bekommen.
ol.rounded-list {
counter-reset: li;
/* Initiate a counter */
list-style: none;
/* Remove default numbering */
*list-style: decimal;
/* Keep using default numbering for IE6/7 */
}
ol.rounded-list li {
margin-bottom: 8px;
border: 0px solid red;
position: relative;
}
ol.rounded-list li:before {
color: #fff;
content: counter(li);
counter-increment: li;
background: #000;
height: 26px;
width: 26px;
line-height: 26px;
border: 1px solid #fff;
text-align: center;
font-weight: bold;
border-radius: 26px;
display: inline-block;
margin-right: 10px;
margin-left: calc((26px + 10px)*-1);
}
Einfacher geht das natürlich mit einm Präprozessor wie z.B. LESS oder SCSS.
ol{
$bulletMass: 26px;
&.rounded-list{
counter-reset: li; /* Initiate a counter */
list-style: none; /* Remove default numbering */
*list-style: decimal; /* Keep using default numbering for IE6/7 */
li{
margin-bottom: 8px;
border: 0px solid red;
position: relative;
&:before{
color: #fff;
content: counter(li);
counter-increment: li;
background: #000;
height: $bulletMass;
width: $bulletMass;
line-height: $bulletMass;
border: 1px solid #fff;
text-align: center;
font-weight: bold;
border-radius: $bulletMass;
display: inline-block;
margin-right: 10px;
margin-left: calc(($bulletMass + 10px)*-1);
}
}
}
}
ol{
@bulletMass: 26px;
&.rounded-list{
counter-reset: li; /* Initiate a counter */
list-style: none; /* Remove default numbering */
*list-style: decimal; /* Keep using default numbering for IE6/7 */
li{
margin-bottom: 8px;
border: 0px solid red;
position: relative;
&:before{
color: #fff;
content: counter(li);
counter-increment: li;
background: #000;
height: @bulletMass;
width: @bulletMass;
line-height: @bulletMass;
border: 1px solid #fff;
text-align: center;
font-weight: bold;
border-radius: @bulletMass;
display: inline-block;
margin-right: 10px;
margin-left: calc((@bulletMass + 10px)*-1);
}
}
}
}