CODEWITHSUNDEEP
htmllistcss
gsamaras
gsamaras

Reputation: 73424

Round background of numbering

I have a list, where every number is styled. What you should focus on is the background of the number. Right now it will take the shape of the number. How to make this background more circular, ideally a nice smooth circle? Here is my Fiddle.

CSS:

.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: relative;
    left: -1em;
    top: 64%;
    margin-top: -1.3em;
    background: rgba(255, 168, 76, 0.5);
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

Upvotes: 2

Views: 181

Answers (1)

Jacob G
Jacob G

Reputation: 14172

A pseudo element is, by default, an inline-element, which you cannot set the width or height of. Change the display to inline-block:

.rounded-list a:before {
    display:inline-block;
    content: counter(li);
    counter-increment: li;
    position: relative;
    left: -1em;
    top: 64%;
    margin-top: -1.3em;
    background: rgba(255, 168, 76, 0.5);
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

JSFiddle
Note that in the jsfiddle, adding the height and width to the element causes the text to flow to a second line. I changed the .rounded-list a width to 150px to fix this.

Upvotes: 2

Related Questions