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

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 while this solution is decent the problem lies in having the 4 and the 5 in the same line with a straight line separating them as in traditional fractions.

Any hack or solution would be acceptable. Not necessarily CSS, Javascript or any other language is acceptable.

Solution

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

<div class="fraction">1/2</div>
<div class="fraction">3/4</div>
<div class="fraction">1/32</div>
<div class="fraction">77/102</div>

JQuery

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

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:

<div class="fraction">
    <span class="top">1</span>
    <span class="bottom">100</span>
</div>