上标下划线随文本向上移动

我有类似以下的 HTML 代码：

<div id="blah">
   We have winner of 1<sup>st</sup> Tournament
</div>

with css

#blah{
text-decoration:underline;
}

但这将 st 的下划线移到了顶部，看起来很奇怪。有什么办法可以只使用 css 来修复它

这很简单。 尝试这个：

#blah sup{
display:inline-block;
border-bottom:1px solid #000;
padding-bottom:2px;//as per your requirement
}