<!-- The blue and green text boxes should not overlap -->
<html>
<body style="font: 1em/1 Ahem, sans-serif;">
<style>
div::before {
    content: "ABCD";
    color: blue;
    display: table;
}
</style>
<div id="test" style="color: green">ABC</div>
<script>
    document.getElementById('test').style.fontSize= "800%";
</script>
</body>
</html>