How to display “Classic” built-up fractions with an horizontal line in CSS / JavaScript?

Question

I have a fraction and I want to display it neatly and nicely.

For example

4/5

would be

4
-
5

I have looked at this and

Answer 1

You may want to look at something like MathJax which uses Javascript.

If you are only using basic fractions you can use the Unicode characters (or equivalent HTML entities):
¼ ½ ¾ ⅓ ⅔ ⅛ ⅜ ⅝ ⅞

For pure CSS, using the horizontal bar may be "traditional" but most people nowadays use the diagonal slash, even when writing fractions on paper. Here is what I use:

.fraction > sup,
.fraction > sub {
  font-size: .66em;
}
.fraction > sup {
  vertical-align: .4em;
}
.fraction > sub {
  vertical-align: -.2em;
}

With this HTML:

  1⁄8