Как изменить размер круга Юникода, например, с помощью CSS?

Question

Попытка поместить words между словами в теге абзаца, но я хочу, чтобы они были меньше, но не могу найти способ изменить его размер, все, что я пробовал, просто игнорирует изменение высоты.

Tried :: before с содержимым, помещением в промежуток, встроенным html и попыткой добавить стили в браузере

<p>Thing1 ⬤ Thing2 ⬤ Thing3</p>

Очень хочу уменьшить размер вдвоепопробовал масштаб, а также ничего не сделал.Я хотел не использовать для этого JS или просто стилизовать тег span, чтобы он выглядел одинаково, но не уверен, возможно ли это сделать только с помощью CSS?

Answer 1

Вы можете просто изменить размер, используя свойство font-size. Пример ниже, надеюсь, это поможет

<i style="font-weight:700; font-size:16px; font-style: normal;">&#9432</i>

Answer 2

Вы можете использовать transform: scale(.5); display: inline-block;, чтобы уменьшить его до 50% от его первоначального размера.

Имейте в виду, что этот метод сохраняет оригинальное пространство элемента, он только изменяет его размер рендеринга.

Answer 3

Используйте font-size, чтобы по существу масштабировать и обернуть его в некоторый встроенный элемент, например span или i или b.

Используйте em единиц ( MDN intro ), чтобы оно было напрямую связано с окружающим текстом.

.dot {
  font-size: 0.65em; /* 65%, essentially */
}

<p>Something <span class="dot">&#x2B24;</span> smaller, <span class="dot">&#x2B24;</span> please.</p>