Machen Sie große Kugeln ohne Verwendung von Hintergrundbildern

Question

Ich versuche, große Aufzählungszeichen mit Pseudo-Elementen und der Inhaltseigenschaft (anstelle von Bildern) zu bekommen und so verwirrte ich mit den Pixeln, bis ich es richtig verstanden habe.

Here is the JsFiddle.

#the-list { 
 
    padding-left: 0; 
 
} 
 
#the-list li { 
 
    list-style: none; 
 
    position: relative; 
 
    padding-left: 50px; 
 
    color: #4F4F4F; 
 
    font-family: "Segoe UI", Segoe, Tahoma, Geneva, sans-serif; 
 
    font-size: 20px; 
 
} 
 
#the-list li + li { 
 
    margin-top: 15px; 
 
} 
 
#the-list li:before { 
 
    content: "\002022"; 
 
    color: #7F7F7F; 
 
    font-size: 90px; 
 
    position: absolute; 
 
    left: -10px; 
 
    top: -52px; 
 
} 
 
#the-list li:hover:before { 
 
    color: #00ADEE; 
 
}

<ul id="the-list"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>

Das einzige Problem, das ich im Moment habe, ist, dass die große Schriftgröße des pseudo-Elementgehalt wird die Hovereffekt verursacht nicht richtig positioniert werden, . Um zu sehen, was ich meine, schweben Sie über den ersten Aufzählungspunkt (grauer Kreis) und Sie werden sehen, dass der zweite Aufzählungspunkt blau wird. Irgendeine Idee, wie ich eine schnelle Lösung implementieren kann?

Answer 1

Sie können border-radius verwenden, damit die Pseudoelemente wie Kreise aussehen, anstatt die Unicode-Schriftart zu verwenden.

#the-list { 
 
    padding-left: 0; 
 
} 
 
#the-list li { 
 
    list-style: none; 
 
    position: relative; 
 
    padding-left: 50px; 
 
    color: #4F4F4F; 
 
    font-family: "Segoe UI", Segoe, Tahoma, Geneva, sans-serif; 
 
    font-size: 20px; 
 
} 
 
#the-list li + li { 
 
    margin-top: 15px; 
 
} 
 
#the-list li:before { 
 
    content: ""; 
 
    background: #7F7F7F; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#the-list li:hover:before { 
 
    background: #00ADEE; 
 
}

<ul id="the-list"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>