css - 如何添加以文本区域为中心的伪元素？

Question

我正在尝试为文本区域使用伪元素并使用 content""属性在中心显示我的文本或图标。一种方法是使用背景图片，但我想要一个纯 css 解决方案，而不是以下内容:

    .myelement::before {
     content:"my element centered inside the text area";
font-size: 40px;
text-align:center;
    }

已知的图像处理方法:

textarea {
  background: url("myimage-centered.png") center center no-repeat;
}

我猜结构应该是这样的:

<i class="myelement"></i>
<textarea class"txtarea"></textarea>

如何使用上面的第一个代码实现此目的？

Answer 1

您需要一个包装器 div 或 span 才能完成这项工作，因为您不能将::before 放在文本区域上……您还需要 z-index。根据您的需要调整百分比。

给你:http://jsfiddle.net/ose4r8uj/60/

HTML 示例:

  <p>You need a wrapper div to make this work because you can't put a before on a text area.</p>
<div class="myelement">
    <textarea type="text"></textarea>
</div>

CSS 示例:

textarea {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
}


.myelement {
    position: absolute;
    display:inline;
}

.myelement:before {
    content: 'Your text';
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 1;
}