Как сверстать так цифры от 1 до 10 с пунктами надписей?

Question

[Наталия]

Чтобы они стояли в круглишках (бардерах - 2px, без бэкграунда) ?

Comments

[Rustam Bainazarov]

https://jsfiddle.net/g520pmz9/

[longclaps]

не в круглИшках, Наташа, а вот в чем.

[Наталия]

longclaps, ну глуповатая я немного, что ж поделаешь))

Answer 1

[Артур Карапетян]

codepen
width, height подогнать в зависимости от размера шрифта

Comments

[Наталия]

я вопрос немного не до конца сформулировала, как сделать, чтобы под этими пунктами были надписи?

[Артур Карапетян]

Наташа, так?

[Артур Карапетян]

Наташа, или так?

[Наталия]

нет, нужно, чтобы слево номер, а справа надпись. как снизу я написала вот.
(1) какая то надпись
(2) какая то надпись
(3) какая то надпись
(4) какая то надпись

[Артур Карапетян]

Наташа,

[Наталия]

Артур, спасибо большое!)

Answer 2

[profesor08]

<div class="number">10</div>

.number {
  border: 2px solid red;
  border-radius: 50%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

Answer 3

[DanKud]

Если без flex то так - https://codepen.io/anon/pen/ywZgoG

Answer 4

[LaraLover]

Странно что все предлагают какие-то костыльные версии с флексами и ТД, и никто не предложил использовать counter-incermant https://css-tricks.com/custom-list-number-styling/