在不使用背景圖像的情況下製作大型子彈

Question

我試圖使用僞元素和內容屬性（而不是圖像）製作較大的子彈點，因此我將這些像素搞亂了，直到我找到正確的像素爲止。

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>

我目前具有唯一的問題是，僞元素含量的大字體尺寸是導致懸停效果不被正確地定位。 爲了明白我的意思，將鼠標懸停在第一個圓點（灰色圓圈）上，您會看到第二個圓點變爲藍色。任何想法如何實現快速修復？

Answer 1

您可以使用border-radius使僞元素看起來像圓圈，而不是使用unicode字體。

#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>