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