<input>
是一个自闭合标签,你不能在其中使用任何:before
或:after
伪元素。你可以将其包装在<label>
或<span>
中,并在那里进行附加。
.start_date:before {
font-family: "FontAwesome";
content: "\f073";
}
.start_date:before,
.start_date input {
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<label class="start_date">
<input type="text" placeholder="Date">
</label>
.start_date {
position: relative;
}
.start_date:before {
font-family: "FontAwesome";
font-size: 14px;
content: "\f073";
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
}
.start_date input {
text-indent: 18px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<label class="start_date">
<input type="text" placeholder="Date" />
</label>