背景の画像を使わずに大きな弾丸を作る

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>

現時点で私がいる唯一の問題は、擬似要素のコンテンツの大きなフォントサイズがホバー効果が正確な位置に表示されないせることです。 私が何を意味するかを見るには、最初の箇条書きの点（灰色の丸）にカーソルを合わせると、2番目の箇条書きの点が青く表示されます。クイックフィックスをどのように実装することができますか？

Answer 1

border-radiusを使用すると、ユニコードフォントを使用するのではなく、疑似要素を円のように見せることができます。

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