Create circle around numbers with JS and CSS

Question

Create circle around numbers with JS and CSS

Navigation

#1 by (6 votes)

3

I'm starting with css and I'm having a question

I have a div called numbers and inside it I have numbers from 01 to 99, how can I insert a circle into them with css without having to use div?

<div id="numeros">
01
02
03
04
05
</div>

Thank you

javascript css

asked by anonymous 20.04.2016 / 18:24

1 answer

Why is the size of a struct not the sum of the sizes of its variables? What are the layers of a web application? [closed]

score 6 · Accepted Answer

You can not do this with just CSS (at least not without harsh gambiarras).

You need at least something like this:

<div class="circulos">
   <i>1</i>
   <i>2</i>
   ...
</div>

or any element that makes sense in your case, instead of i , but you must have something "containing" the numbers.

Then, to make the circle, CSS resolves.

i {
   display:block;
   border-radius:50%;
   border:1px solid green;
}

Generating numbers in JS

Based on the additional question in the comments, here's a JS that already generates the numbers and span s for 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>