Dude, how do you put CSS in the question tag? I'll only respond with CSS.
Notice that the main point here is to use width
with size in CH (character). So a% w / w of% would be the width of 2 characters.
Option 1:
Using width:2ch
and direction:rtl
in parent you align text to the right in a "window" in the box with overflow:hidden
width. You do not need almost any css.
.box {
width: 2ch;
background-color: #f00;
direction: rtl;
overflow: hidden;
font-size:3rem;
}
<div class="box">
<span class="credit-font" id="valYearCD">2036</span>
</div>
Option 2:
With this in mind you can only cover the first two digits with a 2ch
element, for example.
Note:
Note that it is just a css for any font size, because regardless of the font size, the width of the red box is always%
span {
display: inline-block;
width: 4ch;
position: relative;
}
span::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 2ch;
background-color: #f00;
}
<span class="credit-font" id="valYearCD">2036</span>
<br><br>
<span style="font-size: 3rem;" class="credit-font" id="valYearCD">2036</span>
<br><br>
<span style="font-size: 6rem;" class="credit-font" id="valYearCD">2036</span>