<!DOCTYPE html>

<style>
    #actual:before {
        content: "x";
        quotes: "-" "-";
    }

    #actual.change:before {
        content: "x" open-quote "y";
    }
</style>

<p>
    The below two lines should look identical.
</p>
<div id="actual"></div>
<div id="expected">x-y</div>

<script>
    var div = document.getElementById('actual');
    div.offsetTop;
    div.className = 'change';
</script>