Нужно выровнять content у :after вертикально по-центру, чтобы "-" было на уровне кругов. Ссылка на желаемый результат
https://jsfiddle.net/rojfnekx/1/
<div class="container">
<div class="box">
<span>purple</span>
<div></div>
<span>#967cb9</span>
</div>
<div class="box">
<span>green</span>
<div></div>
<span>#9fba7c</span>
</div>
<div class="box">
<span>dark gray</span>
<div></div>
<span>#515351</span>
</div>
</div>
.container{
}
.box{
display:inline-block;
text-align: center;
}
.box:after{
content: "-";
}
.box div{
background-color: black;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 0 auto;
}