See how it is
Ineedtoputthetextatthebottomofthecircleusingcss..Ihavethecodehere link
.circle{
height: 37px;
line-height: 37px;
position: absolute;
background: white;
border-radius: 52px;
width: 37px;
height: 37px;
text-align: center;
font-size: 10px;
border: 2px solid black;
vertical-align: bottom;
}
Just add the property line-height to class .text and decrease margin-left of class .circle
<style>
.circle{
height: 37px;
line-height: 37px;
position: absolute;
background: white;
border-radius: 52px;
width: 37px;
height: 37px;
text-align: center;
font-size: 10px;
border: 2px solid black;
margin-left: -35px;
}
.texto{
line-height: 100px;
}
</style>
<div class="texto">Teste<span class="circle">1</span></div> You do not need to create extra elements (a <span> element, for example) so you can use the pseudo element ::before to stylize the circle:
div::before {
align-items: center;
border: 1px solid #ccc;
border-radius: 50%;
content: attr(data-number);
display: flex;
height: 30px;
justify-content: center;
width: 30px
}
/* somente para mostrar os itens em "lado a lado". */
div {
display: inline-block
}<div data-number='1'>teste</div>
<div data-number='2'>teste</div>
<div data-number='3'>teste</div>