i have a list ltems using flex box i need to get a circular highlight around the dynamic content which are numbers in this case shown by
{galleyCartsDet[0].quantity}
{galleyCartsDet[1].quantity} etc is there a css approach for this
<div className='galley-carts'>
<div class='flexCol floatRight'>
<ul>
<span><b>Galley Details</b></span> <br/>
<li className='floatRight'>{galleyCartsDet[0].quantity} Full Cart</li><br/>
<li className='floatRight'>{galleyCartsDet[1].quantity} Half Cart</li><br/>
<li className='floatRight'>{galleyCartsDet[2].quantity} SMU</li><br/>
<li className='floatRight'>{galleyCartsDet[3].quantity} Stowage</li>
</ul>
</div>
</div>
i have tried
.carts_circle{
border-radius: 10px;
width: 10px;
height: 10px;
background: yellow;
}
but doesn’t seems to work
<div className='galley-carts'>
<div class='flexCol floatRight'>
<ul>
<span><b>Galley Details</b></span> <br/>
<li className='floatRight'><div classname="cart_circle">{galleyCartsDet[0].quantity}</div> Full Cart</li><br/>
<li className='floatRight'><div classname="cart_circle">{galleyCartsDet[1].quantity}</div> Half Cart</li><br/>
<li className='floatRight'><div classname="cart_circle">{galleyCartsDet[2].quantity}</div> SMU</li><br/>
<li className='floatRight'><div classname="cart_circle">{galleyCartsDet[3].quantity}</div> Stowage</li>
</ul>
</div>
</div>