Use of pseudo-elements ::after in a DIV simulating an INPUT with LABEL - Pseudo-element overwrites the cursor. How to do not overwrite the cursor?

Question

I created an editable DIV by simulating an INPUT with a LABEL using the pseudo-element ::after and the pseudo-class :Empty. LABEL (which is actually a pseudo-element ::after with the content equal to the text of the LABEL) initially appears as a placeholder within the DIV and, after the DIV is clicked and filled with some text, the pseudo-class :Empty causes the LABEL to change position and stay above the DIV (simulating an INPUT). So far so good. The problem is that when I click on the DIV to write something, the cursor is behind the LABEL (pseudo-element ::after with the content) and the text I type appears behind as well. I wonder if there is a way to get the cursor above this label.

NOTE: I am using the Bootstrap form-control class to make it easier to make DIV simulate the visual characteristics of an INPUT.

div[data-label-anim] {
    position: relative;
}
div[data-label-anim]::after {
    content: attr(data-label-anim);
    display: block;
    position: absolute;
    background-color: inherit;
    color: black;
    font-size: 1em;
    bottom: 100%;
    left: 0px;
    transform: scale(.7);
    transition:
      transform ease-out 150ms,
      bottom ease-out 150ms;
}
div[data-label-anim]:empty::after {
    transform: scale(1);
    bottom: 0;
}

<div data-label-anim="Nome" name="name" contentEditable=true class="form-control"></div>

See in the image below that the top of the cursor (pointed by the red arrow) appears coming out from behind the LABEL.

Answer 1

Place z-index: -1 in the ::after that he will be behind the cursor.

See without the z-index (note that the cursor is behind the text):

Now with the z-index, note that the cursor is focused above the text: