Rename a table column with: nth-of-type

I think you have the wrong view of how content does not ::after , it will not replace the text that is inside the tag, it will add the contents of content: "" inside the tag.

So to work the way you want, first you have to "delete" the text that is inside the tag, so I suggest font-size: 0 , even if it is not semantic, as I will consider this as a spscial case ok.

After that you have to create your content and put font-size back because if you do not put the font size it will inherit the size 0 which was the size of the "parent"

Now look at the code:

#colunatableprod:nth-of-type(1) { font-size: 0; }
#colunatableprod:nth-of-type(1)::before { font-size: 12px; content: "Produto 1"; color:red; }

<table class="table">
    <thead class="black white-text">
        <tr>
            <th id="colunatableprod" scope="col">Produto</th>
            <th id="colunaindicelucro" scope="col">Índice de Lucro</th>
            <th id="colunamlpremium" scope="col">ML Premium</th>
            <th id="colunamlclassico" scope="col">ML Clássico</th>
        </tr>
    </thead>

        <tr>
            <td>x</td>
            <td>y</td>
            <td>z</td>
            <td>aa</td>

        </tr>
</table>

Using nth-of-type(1) in a id is already incorrect because a id must be unique on the page ( read ). This assumes that you want to use the same id on more than one element.

Only with CSS you will not be able to change the contents of a text node. CSS is used to define visual styles of elements, not to change their nodes, because pseudo-classes are not real nodes (from Greek, pseudo = false). The maximum you will do is to add a mask over an element, and not actually change the node.

For this type of function you use JavaScript, which is already included in the browser. Just use the .textContent (when it's text only) or .innerHTML method (when there are HTML tags):

document.getElementById("colunatableprod").textContent = "Produto Novo";