CODEWITHSUNDEEP
htmlcss
KrMa
KrMa

Reputation: 713

CSS circles with a number

I need to make bullets points like this:

Bulletspoints

I tried to think of anything how to do it, but the only thing I can think of is making it in photoshop, and make a img src tag. the best would be if it was ul and li tags.

Does anybody have a good idea how to do it? I tried something like this, but it is not working properly: JSFIDDLE

HTML

<a href="abecadlo/"><div class="galeria">1</div></a>
<a href="abecadlo/"><div class="galeria">2</div></a>
<a href="abecadlo/"><div class="galeria">3</div></a>

CSS

.galeria{
    border-style: solid;
    border-width: 1px;
    border-color: black;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    margin-right: 2%;
    display: inline;
}

Upvotes: 8

Views: 6563

Answers (2)

Ha Hoang
Ha Hoang

Reputation: 1684

You can do somethings as follow:

HTML

<a href="abecadlo/"><div class="galeria">1</div></a>
<a href="abecadlo/"><div class="galeria">2</div></a>
<a href="abecadlo/"><div class="galeria">3</div></a>

CSS

.galeria{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    padding: 8px;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    text-align: center;
    font-size: 20px;
}

Upvotes: 0

insertusernamehere
insertusernamehere

Reputation: 23580

There are a lot of approaches to realize this. Here's one:

  • create a list (ul or ol) and remove the list style (list-style: none;)
  • initialize a counter: counter-reset: section;
  • increase counter on each list item and print it using a pseudo element (:before): content: counter(section); counter-increment: section;
  • style the pseudo element (:before) like you want it

ul {
  counter-reset: section;
  list-style: none;
}

li {
  margin: 0 0 10px 0;
  line-height: 40px;
}

li:before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 20px 0 0;
  border: 1px solid #ccc;
  border-radius: 100%;
  text-align: center;
}
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Further reading

Demo

Try before buy

Upvotes: 13

Related Questions