<style>
    body {
        font-family: ahem;
        font-size: 40px;
        -webkit-font-smoothing: none;
    }

    div::before {
        content: "1";
    }

    div.table-before::before {
        display: table;
    }

    div.row-group-before::before {
        display: table-row-group;
    }

    div.row-before::before {
        display: table-row;
    }

    div::after {
        content: "333";
        display: table-cell;
    }
</style>
<div class="table-before">22</div>
<div id="target-1" class="table-before">22</div>
<div class="row-group-before">22</div>
<div id="target-2" class="row-group-before">22</div>
<div class="row-before">22</div>
<div id="target-3" class="row-before">22</div>
<script>
    document.getElementById("target-1").style.color = "blue";
    document.getElementById("target-2").style.color = "blue";
    document.getElementById("target-3").style.color = "blue";
</script>