Как мне спроектировать следующее, используя чистый CSS, HTML и Bootstrap (со значком галочки)?

Question

Я хотел бы разработать следующий дизайн с использованием чистого CSS, HTML и Bootstrap.

Предполагается, что содержимое внутри зеленого кружка должно быть знаком галочки (хотя я не смог добиться этого в Paint)

Также обратите внимание на текст внутри большого круга. Я хочу, чтобы он был точно по центру.

Answer 1

.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;
}

<div class="circle">
  <span>Name</span>
  <span>54</span>
  <span>some text</span>
</div>

Проверьте скрипку