Não dá pra fazer isso apenas com CSS (ao menos não sem gambiarras violentas).
Você precisa no mínimo de algo assim:
<div class="circulos">
<i>1</i>
<i>2</i>
...
</div>
ou qualquer elemento que faça sentido no seu caso, no lugar do i
, mas precisa ter alguma coisa "contendo" os números.
Aí, para fazer o círculo, o CSS resolve.
i {
display:block;
border-radius:50%;
border:1px solid green;
}
Gerando os números em JS
Baseado na pergunta adicional nos comentários, eis um JS que já gera os números e span
s para o CSS:
// Escolhendo o elemento que receberá a contagem:
var c = document.getElementById('circulos');
// Loop de 1 a 10
var i;
for ( i = 1; i <= 10; i++ ) {
// Criamos um span:
s = document.createElement('span');
// atribuimos o número ao span:
s.innerText = i;
// colocamos o span dentro do elemento escolhido:
c.appendChild( s );
}
/* aqui estilizamos os span dentro de #circulos para o efeito desejado */
#circulos span {
display:block;
border-radius:50%;
width:1.3em;
height:1.3em;
margin:4px;
text-align:center;
float:left;
border:2px solid #fc0;
}
<div id="circulos">
</div>