在Firefox 3和Google Chrome 8.0中,以下功能可以正常运行:
<style type="text/css"> span:before { content: 'span: '; } </style> <span>Test</span> <!-- produces: "span: Test" -->
但是当元素为时不是这样<input>:
<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元素没有内容。
:before
:after
input
例如,如果你写的<input type="text">Test</input>(这是错误的),浏览器会纠正这一点,并把文字 后 输入元素。
<input type="text">Test</input>
您唯一可以做的就是将每个输入元素包装在span或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 }
例如,以下文档片段和样式表:
<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>等(<textarea>好像是特殊)。
<br>
<img>
<textarea>