Using pseudo-elements: after in a DIV simulating an input with LABEL - the Pseudo-element overlays the cursor. How to do not overlap the cursor?

I created an editable DIV simulating an input with a LABEL using the pseudo-element ::after and the pseudo-class :empty. The LABEL (which is actually a pseudo-element :: after with the content equal to the label text) initially appears as a placeholder inside 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 (which simulates an INPUT). Until then everything works fine. 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 would like to know if you have how the cursor stay above this LABEL.

Note: I'm using Bootstrap's form-control class to make it easier for the DIV to 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 from leaving behind the LABEL.