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

Question

我试图放置一个＆＃34; tick＆＃34;接下来是每个有效文本框旁边的图像（客户端验证）。要做到这一点，我使用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 class被动态添加到input元素。但不解雇图像。

雷

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