<style type="text/css">
    #target::before { content: "BEFORE"; display: table; }
    #target::after { content: "AFTER"; display: table; }
</style>
<p>
    Should say &ldquo;BEFORE CONTENT AFTER CONTENT&rdquo;
</p>
<div id="not-target" style="display: table">
    <div>CONTENT</div>
</div> CONTENT
<script>
    document.getElementById("not-target").id = "target";
    document.body.offsetTop;
    document.body.style.color = "red";
</script>