<!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>