在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
指定要在该元素内部 的内容 之前(或之后)插入 的内容 。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 }
这是一样的道理,为什么它不工作<br>
,<img>
等(<textarea>
好像是特殊)。
问题内容: 在Firefox 3和Google Chrome 8.0中,以下功能可以正常运行: 但是当元素为时不是这样: 为什么它不按我的预期工作? 问题答案: 使用和指定要在该元素内部 的内容 之前(或之后)插入 的内容 。元素没有内容。 例如,如果你写的(这是错误的),浏览器会纠正这一点,并把文字 后 输入元素。 您唯一可以做的就是将每个输入元素包装在span或div中,然后将CSS应用于这些
问题内容: 我想使用一个开关在网页上放置段落标签。 我使用after伪元素: 现在,我需要从页面中删除此CSS代码。 如何轻松做到这一点? 我要补充一点: jQuery已在页面上使用 而且我不想包含或删除包含CSS的文件。 问题答案: p:after { content: none; } none 是将内容(如果指定)设置为 空 的官方值。
问题内容: 是否可以隐藏元素的内容,但保持其内容可见?说我有以下代码: HTML: CSS: 我试过了: 使用和设置为,但两者均仍处于隐藏状态 使用;,但随后似乎增加了额外的空间(?) 使用颜色:透明;但是,当然,跨度的内容仍会占用空间 使用,但是 这被搜索引擎和 似乎不适用于span元素(?) 关于如何执行此操作还有其他想法吗? 问题答案: 您可以使用,但是使用此解决方案,隐藏的内容仍然 会占用
我试图在pseudo元素之前的
问题内容: 这是我的代码,也许您会立即注意到我所缺少的内容: 我正在尝试在CustomerId现有节点之前插入新的node()。这是我的XML示例文件: 这是一个抛出异常,我只是不知道还能尝试什么: NOT_FOUND_ERR:尝试在不存在的上下文中引用该节点。 问题答案: 在这里,我只是使用您提供的xml示例进行了测试的示例。 结果如下: 如果您有兴趣,这是我用来显示结果的示例代码:
问题内容: 我对了解何时可以将和伪元素应用于自动关闭标签特别感兴趣。根据W3生成的内容CSS规范,这是这些伪元素的定义: 12.1:before和:after伪元素 :作者使用 :before和:after伪元素 指定生成内容的样式和位置。顾名思义,:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。“ content”属性与这些伪元素一起指定了要插入的内容。 基于此,这些