[Resolved] Number in Circles for Inline Text

[Py]

I have an image where I have step numbers in an image which I call out in the article.

Here is an example:

Right now I am using unicode to create the green circles in the text:

HTML

<div class="stepcircle">❶</div>		
<div class="stepcircle">❷</div>		
<div class="stepcircle">❸</div>		
<div class="stepcircle">❹</div>		
<div class="stepcircle">❺</div>		
<div class="stepcircle">❻</div>		

CSS

.stepcircle{
	color:#00d07e;
	font-size:1.3em;
}

However the problem is the circles are too small in the default font size. When I increase the font size the line spaces changes for lines with the circle (red in image) compared to normal lines (blue in image).

What is the best way to replicate these circles without disturbing the line spacing? Will css or svg be better than unicode?

[Fernando]

Hi Py,

Can you try setting the line-height of these <mark> tags to 0? Then try changing the font-size.

[Py]

Thank you. Adding line-height:0px; fixed the issue

[Fernando]

You’re welcome Py!

[Author]

Posts