Question

I’d like to add rounded corners to sup element and some paddings.

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

http://jsfiddle.net/HPzuZ/

sup element have display:inline; by default. I can set display:block; and manipulate with padding and rouded corners, but I should modify HTML structure because sup is block now. Is it possible to decorate sup with paddings and rounded corners without modifying HTML structure, but just CSS.

Thank you.

Answer 1

Yes, you can apply inline-block – http://jsfiddle.net/HPzuZ/1/

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