Html 如何在一个网页上写除法符号，其中一个术语写在网页上，下一个术语写在网页下，上划线在第一个术语下？

我希望在页面上显示这种类型的输出，我应该编写什么代码？

希望这有帮助。。

xp
p
.顶{
边框底部：1px纯黑；
显示：内联块；
}
.底部{
转换：translateY（-30px）；
}

这是一个模糊的图像

<div>
    <p class='top'>xp</p>
    <p class='bottom'> p</p>
</div>


.top{
   border-bottom:1px solid black;
   display:inline-block;
 }
.bottom{
   transform:translateY(-30px);
 }