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

If you are happy to use JQuery and want to minimise the mark-up that you need to add then you could use the following:

CSS

.fraction, .top, .bottom {
    padding: 0 5px;    
}

.fraction {
    display: inline-block;
    text-align: center;    
}

.bottom{
    border-top: 1px solid #000;
    display: block;
}

HTML

1/2
3/4
1/32
77/102

JQuery

$('.fraction').each(function(key, value) {
    $this = $(this)
    var split = $this.html().split("/")
    if( split.length == 2 ){
        $this.html('
            '+split[0]+'
            '+split[1]+'
        ')
    }    
});

Working example: http://jsfiddle.net/xW7d8/

Without JQuery

To achieve this without JQuery, you can use the following HTML with the same CSS as above:

    1
    100