如何绘制在引导旋转木马中移动的内圈'；使用CSS的s指示器？

如何使用CSS绘制在引导转盘指示器中移动的内圈

情况如下：

<style lang="sass">
.carousel-indicators li
  background-color: transparent
  border: 0
  border-radius: 100%
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 1)
  height: 22px
  margin-left: 15px
  margin-right: 15px
  width: 22px
.carousel-indicators li:hover
  background-color: #fff
  border: 0
  border-radius: 100%
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 1)
  height: 22px
  margin-left: 15px
  margin-right: 15px
  width: 22px
</style>

和悬停需要如下所示：

<style lang="sass">
.carousel-indicators li
  background-color: transparent
  border: 0
  border-radius: 100%
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 1)
  height: 22px
  margin-left: 15px
  margin-right: 15px
  width: 22px
.carousel-indicators li:hover
  background-color: #fff
  border: 0
  border-radius: 100%
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 1)
  height: 22px
  margin-left: 15px
  margin-right: 15px
  width: 22px
</style>

到目前为止，我编写的代码如下所示：

<style lang="sass">
.carousel-indicators li
  background-color: transparent
  border: 0
  border-radius: 100%
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 1)
  height: 22px
  margin-left: 15px
  margin-right: 15px
  width: 22px
.carousel-indicators li:hover
  background-color: #fff
  border: 0
  border-radius: 100%
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 1)
  height: 22px
  margin-left: 15px
  margin-right: 15px
  width: 22px
</style>

.转盘指示器
背景色：透明
边界：0
边界半径：100%
框阴影：0.2rem rgba（255、255、255、1）
高度：22px
左边距：15px
右边距：15px
宽度：22px
.转盘指示器li：悬停
背景色：#fff
边界：0
边界半径：100%
框阴影：0.2rem rgba（255、255、255、1）
高度：22px
左边距：15px
右边距：15px
宽度：22px

使用

伪元素执行此操作

首先将
li
作为目标，它也作为非活动状态：

.carousel-indicators li {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  padding: 4px;
  position: relative;
  margin: 0 15px;
  background-color: transparent;
  opacity: 1;
}

现在要创建
边框
请使用
伪元素
：

.carousel-indicators li:after {
  border-radius: 50%;
  padding: 10px;
  border: 4px solid #fff;
  position: absolute;
  content: "";
  top: -7px;
  left: -7px;
  bottom: -7px;
  right: -7px;
}

我们已将背景
透明
分配给
li
，但我们希望背景
白色
处于
活动
状态

.carousel-indicators li.active {
  background-color: white;
}

Codepen:
在boostrap中，我们可以使用图标来代替