<!DOCTYPE html>
<p>The orange, blue, yellow and green text boxes should not overlap.</p>
<style>
    #test::before {
        content: "1234";
        color: orange;
    }
    #test::after {
        content: "4578";
        color: yellow;
    }
    ruby, div {
        font: 1em/1 Ahem, sans-serif;
    }
</style>
<ruby id="test" style="color:blue;">
    ABCD
</ruby>
<div style="font-size:500%; color:green;">
    EFGH
</div>
<script>
    document.body.offsetTop;
    var test = document.getElementById("test");
    test.style.fontSize = "500%";
</script>