使用CSS创建此内容的最简单方法

Question

有人知道以下创建文本的最优雅的方法。显然，数字将发生变化，因此两个数字的宽度都必须是动态的。我尝试了几种不同的方法，但对于本来应该很容易的事情，我想出的解决方案似乎过于复杂。

我当前的解决方案：

<span style="height: 20px; font-size: 20px;">12,312,213,213</span>
<span style="position: relative; display: inline-block; width: 70px; height: 20px;">
                <span style="position: absolute; top: -2px; left: 0; height: 16px; font-size: 12px; line-height: 12px; background-color: #be3ad1; padding: 2px 3px 2px 3px; border-radius: 3px; color: white;">
                    12,321,321
                </span>
</span>

Answer 1

检查我的CSS将为您提供帮助：

.superscript { 
position: relative; 
top: -2.5em; 
font-size:200%;
font-weight:bold;
background-color:#BD37CC;
border-radius:12px;
padding:3px;
float:right;
}
.main{
background-color:#F2F2F2;
display:block;
padding:20px;
margin:10px;
width: 300px;
}
.textMain{
font-size:400%;
bottom: -0.5em;
font-weight:bold;
}

<div class="main">
   <span class='textMain'>123,123</span>
  <span class="superscript">12,123</span>
</div>