从 CSS 插入 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4879719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert HTML from CSS
提问by methyl
Is there any way to insert an HTML element, dom or code from CSS(3)?
有没有办法从 CSS(3) 插入 HTML 元素、dom 或代码？
采纳答案by fiiv
Content (for text and not html):
内容（用于文本而不是 html）：
http://www.quirksmode.org/css/content.html
http://www.quirksmode.org/css/content.html
But just to be clear, it is bad practice. Its support throughout browsers is shaky, and it's generally not a good idea. But in cases where you really have to use it, there it is.
但需要明确的是，这是不好的做法。它对整个浏览器的支持不稳定，通常不是一个好主意。但在你真的必须使用它的情况下，它就在那里。
回答by Sotiris
No. The only you can do is to add content (and not an element) using :beforeor :afterpseudo-element.
不。你唯一能做的就是使用:before或:after伪元素添加内容（而不是元素）。
More information: http://www.w3.org/TR/CSS2/generate.html#before-after-content
更多信息：http: //www.w3.org/TR/CSS2/generate.html#before-after-content
回答by alexn
No you cannot. The only thing you can do is to insert content. Like so:
你不能。您唯一能做的就是插入内容。像这样：
p:after {
content: "yo";
}
回答by Stu
An alternative - which may work for you depending on what you're trying to do - is to have the HTML in place and then use the CSS to show or hide it depending on the class of a parent element.
另一种选择——这可能对你有用，具体取决于你要做什么——是让 HTML 就位，然后使用 CSS 来显示或隐藏它，具体取决于父元素的类。
OR
或者
Use jQuery append()
使用 jQuery append()
回答by Steven Penny
This can be done. For example with Firefox
这是可以做到的。例如使用 Firefox
CSS
CSS
#hlinks {
-moz-binding: url(stackexchange.xml#hlinks);
}
stackexchange.xml
堆栈交换文件
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<binding id="hlinks">
<content>
<children/>
<html:a href="/privileges">privileges</html:a>
<html:span class="lsep"> | </html:span>
<html:a href="/users/logout">log out</html:a>
</content>
</binding>
</bindings>
