<!DOCTYPE html>
<style>
#before::before, #after::after { content: attr(my-value) }
</style>
<p>You should see two PASSes below.</p>
<div id="before">SS</div>
<div id="after">PA</div>
<script>
document.body.offsetTop; // force layout

before.setAttribute("my-value", "PA");
after.setAttribute("my-value", "SS");
</script>