SUP元素和圆角

Question

我想在sup元素中添加圆角和一些填充。

<div>Here is my main text<sup>sup text</sup></div>
<style>
  sup {
    background-color:#f00;
  }
</style>

http://jsfiddle.net/HPzuZ/

默认情况下，sup元素具有display:inline;。我可以设置display:block;并使用填充和旋转的边角进行操作，但我应该修改sup结构，因为HTML现在是阻塞的。有没有可能用填充和圆角来装饰sup而不修改HTML结构，而仅仅是CSS。

谢谢。

Answer 1

可以，您可以应用inline-block - http://jsfiddle.net/HPzuZ/1/

sup {
    background-color: #f00;
    display: inline-block;
    border-radius: 3px;
    padding: 0 6px;
}​