<h4>clamp</h4>
<div>
    <span class="num1" style="--num:2">2</span>
    <span class="num1" style="--num:9">9</span>
    <span class="num1" style="--num:28">28</span>
</div>
<h4>flex-end</h4>
<div>
    <span class="num2">1</span>
    <span class="num2">9</span>
    <span class="num2">12</span>
</div>
<h4>decimal-leading-zero</h4>
<div>
    <span class="num3" style="--num:1">1</span>
    <span class="num3" style="--num:9">9</span>
    <span class="num3" style="--num:12">12</span>
</div>
<h4>pad-num</h4>
<div>
    <span class="num4" style="--num:1">1</span>
    <span class="num4" style="--num:98">98</span>
    <span class="num4" style="--num:112">112</span>
</div>

html,body{
    margin: 0;
    height: 100%;
    font-size: 60px;
    font-family: Consolas, Monaco, monospace;
}
body{
    display: grid;
    place-content: center;
    overflow: auto;
}
h4{
    margin:.5em 0;
    color: burlywood;
    font-size: .5rem;
    /* margin-bottom: .5em; */
}

.num1{
    background-color: antiquewhite;
}
.num1::before{
    content: '0';
    opacity: calc(10 - var(--num));
    margin-left: clamp(-1ch, calc((10 - var(--num)) * 1ch),0ch);
}
.num2{
    display: inline-flex;
    background-color: aliceblue;
    width: 2ch;
    justify-content: flex-end;
    overflow: hidden;
}
.num2::before{
    content: '0';
}
@counter-style pad-num {
    system: extends numeric;
    pad: 3 "0";
}
.num3{
    font-size: 0;
}
.num3::before{
    font-size: 60px;
    counter-reset: num var(--num);
    content: counter(num, decimal-leading-zero);
    background-color: beige;
}
.num4{
    font-size: 0;
}
.num4::before{
    font-size: 60px;
    counter-reset: num var(--num);
    content: counter(num, pad-num);
    background-color: lavender;
}