How to represent fractions in html

Question

I want to represent fractions in html and the code I am using now is this:

<sup>3</sup>&frasl;<sub>8</sub>

And it looks like this:

But I want to represent it something like this:

How do I change it?

Need some guidance on this.

Answer 1

It is not possible through pure HTML. But you can create that type of fraction using a bit of CSS.

.fraction {
  position: relative;
  width: 1em;
  font-size: 2em;
}
.numerator {
  border-bottom: 2px solid black;
  text-align: center;
}
.denominator {
  border-right: 2px solid black;
  width: 0.75em;
  text-align: center;
}

<div class="fraction">
  <div class="numerator">3</div>
  <div class="denominator">8</div>
</div>