如何使用纯CSS和HTML和Bootstrap（带有复选图标）设计以下内容？

Question

我想使用纯CSS，HTML和Bootstrap设计以下设计。

绿色圆圈内的内容应该是一个复选标记（尽管我在Paint中无法实现）

还要注意大圆圈内的文本。我希望它恰好在中心。

Answer 1

arr_to_vec3

.circle {
  border-radius: 50%;
  border: 4px solid #CCCCCC;
  display: flex;
  width: 140px;
  height: 140px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.circle:before {
  content: '';
  position: absolute;
  height: 40px;
  width: 40px;
  background-color: green;
  border-radius: 50%;
  bottom: 0;
  left: -10px;
  border: 5px solid #FFF;
}

.circle:after {
  content: '✔';
  position: absolute;
  color: #FFFFFF;
  bottom: 13px;
  left: 6px;
  font-size: 20px;
}

Check out the fiddle