CODEWITHSUNDEEP
css
Phreak
Phreak

Reputation: 301

Custom styled ordered list centering the digit

I'm making a custom styled ordered list.

I'm styling the list element so it contains a circle (border-radius:50%;) with the number centered inside of it. I'm having trouble with positioning the numbers perfectly centered to the circle(green) background. If I add padding to the inside element then the double digit numbers are off centered. Is there a solution or a better way to do this and that's also responsive?

Here is the code link https://jsfiddle.net/awexkma6/1/

(HTML)

<ol class="custom-counter">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

CSS

.custom-counter {
    list-style-type: none;
    margin-left: 0;
    padding-right: 0;
}
.custom-counter li {
    counter-increment: step-counter;
    position: relative;
    padding: .5em 0 .5em 3em;
    color: #6d6e73;
    border-bottom: .175em solid #e5e5e5;
    margin-bottom: .5em;
}
.custom-counter li:before {
    position: absolute;
    left: 0;
    content: counter(step-counter);
    background-color:green;
    font-weight: bold;
    border-radius: 50%;
    color: white;
    width: 1.5em;
    height: 1.5em;
}

Thanks for helping.

Upvotes: 1

Views: 1083

Answers (3)

pine_cone
pine_cone

Reputation: 21

Add some padding to your css like this:

enter code here.custom-counter li:before {
    position: absolute;
    left: 0;
    content: counter(step-counter);
    background-color:green;
    font-weight: bold;
    border-radius: 50%;
    color: white;
    width: 1.5em;
    height: 1.5em;
    padding: 7px 0 0 7px;
}

Upvotes: 1

Tushar Khatiwada
Tushar Khatiwada

Reputation: 2027

Update your css style with this:

.custom-counter li:before {
    position: absolute;
    left: 0;
    content: counter(step-counter);
    background-color: green;
    border-radius: 50%;
    color: white;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1.5em;
}

Here's the updated fiddle: https://jsfiddle.net/tusharkhatiwada/awexkma6/3/

Upvotes: 0

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

I answered a very similar question yesterday, but here we go again:

The trick is to add a fixed width and height with text-align: center, and line-height equal to height:

.custom-counter li {
    counter-increment: step-counter;
    position: relative;
    display: block;
    padding: 0;
    color: #6d6e73;
    border-bottom: .175em solid #e5e5e5;
    margin-bottom: .5em;
    float: left;
    clear: both;
    //Add this
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
}

https://jsfiddle.net/awexkma6/2/

Upvotes: 1

Related Questions