CSS: как нарисовать круг с текстом рядом с ним

Question

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

Пожалуйста, проверьте прикрепленное изображение

Вот код, который я использовал, но он не работал

.badge {
  height: 60px;
  width: 60px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: #337EFB;
  padding:-5px;
}

<span><a class="badge" href="/">fb</span><span>keeper</span></a>

Answer 1

Установите отображение .badge на inline-block и используйте line-height для центрирования текста по вертикали.

Примечание: чтобы сделать весь заголовок кликабельным, замените внешний диапазон тегом,и конвертируйте один изнутри в тег span.

.title {
  font-size: 2em;
  text-decoration: none;
  color: var(--title-color);
  --title-color: #337EFB;
}

.badge {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  background: var(--title-color);
  color: white;
}

<a class="title" href="#">
  <span class="badge" href="/">fb</span>
  <span>keeper</span>
</a>

Answer 2

Вы неправильно закрыли свой тег привязки. Вам нужно закрыть его перед началом второго интервала для запуска word keeper и внутри первого интервала. Пожалуйста, посмотрите код ниже и попробуйте один раз:

<span><a class="badge" href="/">fb</a></span><span>keeper</span>

Answer 3

В вашем HTML-коде возникла проблема. Вот что вы должны поставить:)

<a href="/"><span class="badge">fb</span><span>keeper</span></a>