Displaying diagonal fractions in HTML

Question

I had followed many of the posts in StackOverflow, but they talk about stacked fractions.
I was working on displaying diagonal fractions like this:

Here is my code :

* {
  font-size: 50px;
}

.container {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  border: 1px solid red;
}

.numerator {
  grid-column: 1/2;
  grid-row: 1/2;
  border: 1px solid green;
}

.denominator {
  grid-column: 2/3;
  grid-row: 2/3;
  border: 1px solid green;
}

<span class="container"><span class="numerator">3</span><span class="denominator">5</span></span><br><br>
<span class="container"><span class="numerator">17</span><span class="denominator">4113</span></span>

Note: I have added borders just for clarity.

But, I cannot figure out how to add that slash in between. Please help.

Answer 1

One simple way is to just use the subscript tag, and the superscript tag.

<p>This text contains <sup>23</sup>/<sub>24</sub> of a number</p>

This text contains ²³/₂₄ of a number