CSS在悬停的情况下创建边框填充圆圈，圆圈和边框之间有空格

Question

我有一个问题就是只与CSS一起创建这些元素。我创造了一个小的白色圆圈。但我希望这个圆圈在:hover效果上获得一个白色的圆形边框。

这应该是:hover的样子：

我在这里找到了一些想法，但似乎都没有。我尝试使用outline，但最后我觉得必须使用box-shadow？

目前我有这个结果：

My Result (Fiddle)

另一种解决方案是加载图像。我可以创建此图片，只需在:hover上显示即可。但这不是最佳实践，我想知道如何通过CSS实现这一目标。

感谢。

Answer 1

使用两个方框阴影而不是一个：

.navi-dots li {
  width: 8px;
  height: 8px;
  margin: 25px 0 25px 0;
  background-color: #ffffff;
  -webkit-border-radius: 50px;
  /* Safari, Chrome */
  -moz-border-radius: 50px;
  /* Firefox */
  border-radius: 50px;
  /* CSS3 */
}

.navi-dots li:hover {
  box-shadow: 0 0 0 6px #000, 0 0 0 7px #ffffff;
}

body {
  background-color: black;
}

<ul class="list-unstyled navi-dots">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

只是为了好玩......

.navi-dots li {
  width: 8px;
  height: 8px;
  margin: 25px 0 25px 0;
  background-color: #ffffff;
  -webkit-border-radius: 50px;
  /* Safari, Chrome */
  -moz-border-radius: 50px;
  /* Firefox */
  border-radius: 50px;
  /* CSS3 */
  
  transition: all .2s ease;
  box-shadow: 0 0 0 0 #000, 0 0 0 0 #ffffff;
}

.navi-dots li:hover {
  box-shadow: 0 0 0 6px #000, 0 0 0 7px #ffffff;
}

body {
  background-color: black;
}

<ul class="list-unstyled navi-dots">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 2

你可以使用css :before属性这里是带有工作示例的完整代码https://jsfiddle.net/qvjs66v5/1/

.navi-dots li {
    width: 8px;
    height: 8px;
    margin: 25px 0 25px 0;
    background-color: #ffffff;
    -webkit-border-radius: 50px;
    /* Safari, Chrome */
    -moz-border-radius: 50px;
    /* Firefox */
    border-radius: 50px;
    /* CSS3 */
    position:relative;
}
.navi-dots li:before {
  position:absolute;
  width:16px;
  height:16px;
  top:-6px;
  left:-6px;
  border-radius:100%;
  border:2px solid #fff;
  display:none;
  content:"";
}
.navi-dots li:hover:before {
   display:block
}

body {
  background-color: black;
}