textarea元素::after伪元素不生效，如何实现div同款警告标记？

这问题我之前也碰到过！核心原因是textarea属于CSS里的替换元素，这类元素的内容由浏览器内部控件渲染，CSS的:before/:after伪元素无法在它们上面生成额外内容——而div这类常规的非替换元素就没有这个限制，所以你的样式在div上生效，在textarea上失效。

下面给你一个简单可靠的解决方案：用容器包裹textarea，把伪元素样式转移到容器上，同时调整textarea的样式让它和容器融合，视觉效果和你原来的div完全一致。

完整代码示例 #

CSS代码 #

/* 容器样式：承担原textarea的边框和伪元素载体 */
.textarea-wrapper {
  border: 2px solid red;
  position: relative;
  display: inline-block; /* 让容器自适应textarea的宽度 */
}

/* 伪元素样式：和原:after完全一致 */
.textarea-wrapper: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;
}

/* 调整textarea样式：去掉边框，填满容器 */
.textarea-wrapper textarea {
  border: none;
  width: 100%;
  min-height: 120px; /* 可根据需求调整高度 */
  box-sizing: border-box; /* 确保padding不会撑大textarea */
  resize: vertical; /* 保留垂直拉伸功能，可选 */
}

/* 原div样式保持不变，添加间距方便对比 */
div {
  border: 2px solid red;
  position: relative;
  display: inline-block;
  margin-top: 10px;
}

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;
}

HTML代码 #

<div> Div<br> Div<br> Div<br> Div<br> Div<br> Div<br> Div<br> </div>
<div class="textarea-wrapper">
  <textarea> Textarea Textarea Textarea Textarea Textarea </textarea>
</div>

方案优势 #

• 容器是常规div元素，完美支持:after伪元素，1:1复刻原警告标记效果
• textarea去掉边框后，容器的红色边框成为它的视觉边框，和div外观完全统一
• box-sizing: border-box确保textarea的内边距不会超出容器，避免布局错乱
• 保留textarea原生功能（输入、拉伸等），同时视觉效果和div完全一致

这个方案在你测试的Chrome和Firefox最新版上都能正常工作，且兼容性覆盖绝大多数现代浏览器。

内容的提问来源于stack exchange，提问作者Swiss Mister