<style type="text/css">
#target::before { content: "BEFORE"; display: table; }
#target::after { content: "AFTER"; display: table; }
</style>
<p>
Should say “BEFORE CONTENT AFTER CONTENT”
</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>