I need to make bullets points like this:
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;
}
There are a lot of approaches to realize this. Here's one:
ul
or ol
) and remove the list style (list-style: none;
)counter-reset: section;
:before
): content: counter(section); counter-increment: section;
:before
) like you want itul {
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With