在Firefox 3和Google 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您指定在（或之后）之前插入哪些内容the content 在该元素内部。input元素没有内容。
例如。如果你写<input type="text">Test</input>（这是错误的）浏览器将纠正此问题并将文本放置后输入元素。
您唯一可以做的就是包裹跨度或DIV中的每个输入元素，然后在这些元素上应用CSS。
在规格：
例如，以下文档片段和样式表：
<h2> Header </h2> h2 { display: run-in; } <p> Text </p> p:before { display: block; content: 'Some'; }…将以与以下文档片段和样式表完全相同的方式渲染：
<h2> Header </h2> h2 { display: run-in; } <p><span>Some</span> Text </p> span { display: block }
这与它不起作用的原因相同<br>，，，，<img>， ETC。 （<textarea>似乎很特别）。