css - ::after textarea中的伪元素不起作用

Question

我想用警告标记文本区域。

我之前对 div 使用了相同的格式，但它不适用于 textarea 元素。

我怎样才能得到相同的文本区域？

代码示例：

• 有效的 div
• 具有完全相同样式的 textarea 不起作用

在 Windows 上的当前 Chrome 和 firefox 中测试。

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>

标签： csstextareapseudo-element

Answer 1

:before和:after伪元素不起作用text-area（以及任何包含另一个元素的元素，例如img或imput标签）。

这是因为这些伪元素的生成内容放在元素内，但唯一不同的是，它们将放置在元素内容之前/之后，它们就像一个元素一样。