不使用背景图像制作大型子弹

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>