Recreate GitHub's language list using CSS - html

Question

How can I recreate GitHub's repositories language list using CSS only? Something like this, for example:
I started with a list of divs but I cannot figure out how to draw the dots using CSS...
<div>
<div>C 90%</div>
<div>Assembly 5.8%</div>
<div>Makefile 2.9%</div>
<div>C++ 0.5%</div>
</div>

Answer 1

You can use ::before pseudo element to add the dots before each item.
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
Something like this:
div > div {
position: relative;
margin-left: 10px;
}
div > div:before {
content: '';
position: absolute;
height: 5px;
width: 5px;
right: 100%;
margin-right: 5px;
top: calc(50% - 2.5px);
border-radius: 2px;
background: red;
}
<div>
<div>C 90%</div>
<div>Assembly 5.8%</div>
<div>Makefile 2.9%</div>
<div>C++ 0.5%</div>
</div>

Answer 2

Okay I managed to do something similar:
<div class="rows">
<div class="dot" style="color: #555555;"></div>
<div class="child">C 90%</div>
</div>
<div class="rows">
<div class="dot" style="color: #6E4C13;"></div>
<div class="child">Assembly 5.8%</div>
</div>
<div class="rows">
<div class="dot" style="color: #427819;"></div>
<div class="child">Makefile 2.9%</div>
</div>
.rows {
text-align: center;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.dot, .child {
vertical-align: middle;
display: inline-block;
}
.rows > .dot {
position: relative;
margin-left: 10px;
margin-bottom: 10px;
}
.rows > .dot:before {
content: '';
position: absolute;
height: 10px;
width: 10px;
right: 100%;
margin-right: 5px;
top: 20%;
border-radius: 10px;
background-color: currentColor;
}
The dot colour is managed from the style attribute. The last thing left to do is to change the font of the language name(e.g. Assembly) and of the percentage(e.g. 5.8%), after that result is very similar to GitHub's.