在Firefox 3和谷歌Chrome 8.0中，以下工作正常:
<style type="text/css">
span:before { content: 'span: '; }
</style>
<span>Test</span> <!-- produces: "span: Test" -->
但当元素<input>时就不会了:
<style type="text/css">
input:before { content: 'input: '; }
</style>
<input type="text"></input> <!-- produces only the textbox; the generated content
is nowhere to be seen in both FF3 and Chrome 8 -->
为什么不像我想象的那样?
当前回答
使用:before和:after可以指定哪些内容应该插入到该元素的内容之前(或之后)。输入元素没有内容。
例如，如果你写<input type="text">Test</input>(这是错误的)，浏览器将纠正这一点，并将文本放在input元素之后。
你唯一能做的就是在span或div中包装每个输入元素，并在这些元素上应用CSS。
请参阅规范中的示例:
例如，下面的文档片段和样式表: <h2> Header </h2> h2 {display:磨合;｝ <p> Text </p> p:before {display: block;内容:“一些”;｝ .．.将以与以下文档片段和样式表完全相同的方式呈现: <h2> Header </h2> h2 {display:磨合;｝ <p><span>Some</span> Text </p> span {display: block}
这是同样的原因，为什么它不工作<br>， <img>等(<textarea>似乎是特殊的)。
其他回答
这样做是可行的:
输入+标签::{后 内容:“点击我的输入”; 颜色:黑色; ｝ 输入:focus + label::after { 内容:“尚未有效”; 颜色:红色; ｝ 输入:valid + label::after { 内容:“看起来不错”; 颜色:绿色; ｝ <input id="input" type="number" required /> <标签= "输入" > < / >标签
然后添加一些浮动或定位来订购东西。
使用:before和:after可以指定哪些内容应该插入到该元素的内容之前(或之后)。输入元素没有内容。
例如，如果你写<input type="text">Test</input>(这是错误的)，浏览器将纠正这一点，并将文本放在input元素之后。
你唯一能做的就是在span或div中包装每个输入元素，并在这些元素上应用CSS。
请参阅规范中的示例:
例如，下面的文档片段和样式表: <h2> Header </h2> h2 {display:磨合;｝ <p> Text </p> p:before {display: block;内容:“一些”;｝ .．.将以与以下文档片段和样式表完全相同的方式呈现: <h2> Header </h2> h2 {display:磨合;｝ <p><span>Some</span> Text </p> span {display: block}
这是同样的原因，为什么它不工作<br>， <img>等(<textarea>似乎是特殊的)。
供参考<form>支持:before /:after以及，如果你用它包装你的<input>元素，可能会有帮助…(我自己也有一个设计问题)
这并不是因为输入标记本身没有任何内容，而是因为它们的内容超出了CSS的范围。
输入元素是一种叫做替换元素的特殊类型，它们不支持:before和:after这样的伪选择器。
在CSS中，被替换的元素是表示为的元素 超出了CSS的范围。这些是外部物体 表示独立于CSS。典型替换元件 是<img>， <对象>，<视频>或窗体元素，如<textarea> 输入>和<。一些元素，如<audio>或<canvas>被替换 元素只在特定情况下使用。CSS中插入的对象 内容属性是匿名替换的元素。
请注意，这甚至在规范中被引用:
此规范没有完全定义:before的交互 和:替换元素后(如HTML中的IMG)。
更明确地说:
被替换的元素没有::before和::after 伪元素
使用标签标签和我们的方法=，是绑定输入。 如果遵循表单规则，并避免与标签混淆，请使用以下格式:
<style type="text/css">
label.lab:before { content: 'input: '; }
</style>
或者比较(短代码):
<style type="text/css">
div label { content: 'input: '; color: red; }
</style>
形成……
<label class="lab" for="single"></label><input name="n" id="single" ...><label for="single"> - simle</label>
或者比较(短代码):
<div><label></label><input name="n" ...></div>
