I decided to try using html + css to display simple mathematical formulas. A plus ("+") between two high blocks goes down. I do not understand how it can be centered vertically with the help of css. And the lower border is drawn over the plus between the fractions: it crawls a little to the right.

div { display: inline-block; } div.sum>div:nth-child(1)::after { content: "+"; } div.div>div:nth-child(1) { clear: right; display: block; border-bottom: 1px solid black; } 
 <div class="sum"> <div class="div"> <div class="sum"> <div>21</div> <div>37</div> </div> <div class="sum"> <div>12</div> <div>22</div> </div> </div> <div class="div"> <div class="sum"> <div>123</div> <div>456</div> </div> <div class="sum"> <div>12</div> <div>555</div> </div> </div> </div>

I would also be grateful for links on the topic.

    1 answer 1

    Well, if only so, although I think there are other ways.

      div { display: inline-block; position: relative; text-align: center; } div.sum > div:nth-child(1)::after { content: "+"; } div.div > div:nth-child(1) { border-bottom: 1px solid black; clear: right; display: block; } .formula > div.sum > div::after { position: absolute; right: -11px; top: 10px; } .formula > div.sum > div:nth-child(1) { margin-right: 10px; } 
     <div class="formula"> <div class="sum"> <div class="div"> <div class="sum"> <div>21</div> <div>37</div> </div> <div class="sum"> <div>12</div> <div>22</div> </div> </div> <div class="div"> <div class="sum"> <div>123</div> <div>456</div> </div> <div class="sum"> <div>12</div> <div>555</div> </div> </div> </div> </div>