下付き文字のすぐ上に上付き文字を描画するインライン構造を設計するにはどうすればよいですか？

Question

私は数学的表記A _サブ^supを再現したいと思いますが、 "sup"は "sub"の真上にあります。

次のコードは近いですが、あまりありません。

.outer { 
 
    display: inline-block; 
 
} 
 

 
.left { 
 
    display: inline-block; 
 
    padding-top: 0.2rem; 
 
    padding-bottom: 0.2rem; 
 
} 
 

 
.right { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.sup { 
 
    display: block; 
 
    font-size: 0.5rem; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.sub { 
 
    display: block; 
 
    font-size: 0.5rem; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class="outer"> 
 
    <div class="left"> 
 
    A 
 
    </div> 
 
    <div class="right"> 
 
    <div class="sup"> 
 
     sup 
 
    </div> 
 
    <div class="sub"> 
 
     sub 
 
    </div> 
 
    </div> 
 
</div>

は、これを達成するための、より正しい方法は何でしょうか？

Answer 1

フレックスボックスを使用できます。

<p class="expression"> 
    Before <span class="script"><span>Sup</span><span>Sub</span></span> After 
</p> 

CSS

.expression { 
    font-size: 30px; 
    display: flex; 
    align-items: center; 
} 

.script { 
    display: flex; 
    flex-direction: column; 
} 

.script span { 
    font-size: 15px; 
} 

https://jsfiddle.net/qom7L03y/3/