CSS实现99+未读消息实例页面

CSS代码：

.col {
    display: inline-flex;
    width: 4rem; height: 4rem;
    align-items: center;
    justify-content: center;
}
.icon-comment {
    width: 2rem; height: 2rem;
    background: url("data:image/svg+xml,... %3C/svg%3E") no-repeat center/100%;
    font-size: 0;
}
.col sup {
    position: absolute;
    box-sizing: border-box;
    min-width: 1rem;
    padding: 0 0.1875rem;
    color: #fff;
    font-size: min(.75rem, calc(10000px - var(--num) * 100px));
    line-height: 1.2;
    text-align: center;
    background-color: #eb4646;
    border: 1px solid #fff;
    border-radius: 1rem;
    transform: translate(calc(40% + .375rem), -.75rem);
    /* 数值为0的时候隐藏 */
    opacity: var(--num);
}
.col sup::before {
    content: '99+';
    font-size: min(.75rem, calc(var(--num) * 100px - 9900px));
}

HTML代码：

<a href class="col">
    <i class="icon-comment">评论</i>
    <sup style="--num:0">0</sup>
</a>
<a href class="col">
    <i class="icon-comment">评论</i>
    <sup style="--num:9">9</sup>
</a>
<a href class="col">
    <i class="icon-comment">评论</i>
    <sup style="--num:98">98</sup>
</a>
<a href class="col">
    <i class="icon-comment">评论</i>
    <sup style="--num:99">99</sup>
</a>
<a href class="col">
    <i class="icon-comment">评论</i>
    <sup style="--num:100">100</sup>
</a>
<a href class="col">
    <i class="icon-comment">评论</i>
    <sup style="--num:1314">1314</sup>
</a>