如何使用伪元素将图像放置在文本框旁边？

Question

我试图在每个有效的文本框（客户端验证）旁边放置一个“刻度”图像。 为此，我使用了psuado元素。

的CSS

.valid {
border: 2px solid #a9cc56;
}

.valid:after {
content: "";
background: url('~/Areas/Waybill/Content/Images/icn-validation-valid.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
display: block;
}

当输入有效时，.valid类会动态添加到输入元素。 但不发射图像。

射线

Answer 1

仅使用CSS可能会有一些问题，因为:after元素是used元素的一部分，但是输入不能包含任何子元素。

您必须执行以下操作：

<input /><span></span>

CSS：

.valid + span:after {
content: "";
background: url('~/Areas/Waybill/Content/Images/icn-validation-valid.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
display: block;
}

编辑：

有用的答案： https : //stackoverflow.com/a/4660434/2746472