Recreate GitHub's language list using CSS-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

Okay I managed to do something similar:

<div >
  <div  style="color: #555555;"></div>
  <div >C 90%</div>
</div>
<div >
  <div  style="color: #6E4C13;"></div>
  <div >Assembly 5.8%</div>
</div>
<div >
  <div  style="color: #427819;"></div>
  <div >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.