::after pseudo element in textarea not working [duplicate]

Question

I want to mark a textarea with a warning.

I previously used the same formatting for a div, but it won't work in a textarea element.

How can I get the same for a textarea?

Code sample:

• div that works
• textarea with the exact same styles that does not work

Tested in current Chrome and firefox on Windows.

textarea, div {
    border: 2px solid red;
    position:relative;
}
textarea:after, div:after {
    content: 'Some Text';
    position: absolute;
    top: 0;
    left: 0;
    font-size: .6em;
    color: #fff;
    background-color: red;
    padding: 3px;
    border-bottom-right-radius: 4px;
    line-height: 1em;
}

<div>
  Div<br>
  Div<br>
  Div<br>
  Div<br>
  Div<br>
  Div<br>
  Div<br>
</div>

<textarea>
  Textarea
  Textarea
  Textarea
  Textarea
  Textarea
</textarea>

Answer 1

:before and :after pseudo-elements do not work on text-area (and any elements that contain another element such as img or input tags).

This is because the generated content of those pseudo-element are put within the element but only the difference is, they will be placed on before/after that element's content and they act like as an element.