HTML CSS: Diplaying number divided by total number - html

Question

I am trying to display numbers in circle which is number over total numbers for example 90/100.
Like this:
I tried like this but need small help because Circle is breaking up.
.kanban-circle{
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
<span class="kanban-circle">
<u>90</u>
<br></br>
100
</span>

Answer 1

Here it is, if you like more space between the number and the horizontal line, change the css for .line like { margin: 5px 0; }
.kanban-circle {
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
display: flex;
flex-direction: column;
}
.line {
padding: 0;
margin: 0;
width: 100%
}
span {
font-size: 15px;
}
<div class="kanban-circle">
<span>90</span>
<hr class="line" />
<span>100
</span></div>

Answer 2

The problem is with the <br> tag. I don't really know why, but through this tag, the lower number is not seen as part of the circle and the border is not drawn around it.
I experimented a little bit and came to following solution with following code:
.kanban-circle{
border-radius: 50%;
background-color: coral;
width: 70px;
height: 70px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
<div class="kanban-circle">
<div>
<u>90</u>
110
</div>
</div>
I replaced span with div, but the result should be the same.

Answer 3

here the solution with also the comments, if you want to read it.
I make it responsive to the width, just change the width of parent element, and automatically change all the things inside!
the first 2 lines of CSS are css variables
--width: 3rem;
--color: #666;
Change their value, and all the elements will be changed automatically, and be show always good.
if you want to also be more responsive, you can use some new CSS units in --width: like vw, vh, %, etc... this is relative to something (parent elements, or viewport width, etc...)
so for responsive layout try to not use (avoid) absolute units like cm, px, in, pt. details: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
in html I used <hr> instead of <br>
#container {
--width: 3rem;
--color: #666;
/* same height, same width */
width: var(--width);
height: var(--width);
/* responsive padding that is relative to the container width*/
padding: calc(var(--width) / 5);
/* always perfect circle */
border-radius: var(--width);
/* centering */
display: grid;
place-items: center;
/* coloring with the same color */
border: 2px solid var(--color);
color: var(--color);
/* font responsive to parent container */
font-size: calc(var(--width) / 3)
}
#container hr {
/* responsive width */
width: 100%;
/* removing a little bug if we use GRID */
margin: 0;
}
<div id="container">
<span>97</span>
<hr>
<span>100</span>
</div>

Answer 4

You could do it as below. Feel free to adjust it to your need.
.kanban-circle {
border-radius: 50%;
width: 86px;
height: 86px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
font: 32px Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.kanban-circle hr {
width: 100%;
margin:0;
border: 1px solid #666;
}
<span class="kanban-circle">
<span>90</span>
<hr/>
<span>100</span>
</span>