Same line 3 classes - html

Question

I want to give an explanation based on color of each dot below.
The whole page is:
My HTML code for the spesific area:
<div class="dot-expl">
<div class ="dot dot-red">Ended</div>
<div class ="dot dot-green">Running</div>
<div class ="dot dot-yellow">Ready to start</div>
</div>
My whole CSS code:
.dot-expl{
display: flex;
align-items: center;
overflow:visible;
}
.dot {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
}
.dot-red {
background-color: red;
}
.dot-green {
background-color: green;
}
.dot-yellow {
background-color: yellow;
}
But the result is:
I cannot find how to give more space between the dots as so as the text can be visible

Answer 1

You could do it with this approach by using the pseudo class ::before
I set a margin to each .dot on both sides (left & right) to have some space between the individual elements.
You could also give your wrapper a fixed width and use justify-content on the wrapper. But I assume this will make you run into other problems depending on the length of the text.
.dot-expl {
display: flex;
align-items: center;
overflow: visible;
}
.dot {
margin: 0 5px;
display: flex;
align-items: center;
}
.dot::before {
content: '';
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
margin-right: 2px;
}
.dot-red::before {
background: red;
}
.dot-green::before {
background: green;
}
.dot-yellow::before {
background: yellow;
}
<div class="dot-expl">
<div class="dot dot-red">Ended</div>
<div class="dot dot-green">Running</div>
<div class="dot dot-yellow">Ready to start</div>
</div>