从 CSS 插入 HTML答案

【问题标题】：Insert HTML from CSS从 CSS 插入 HTML
【发布时间】：2018-05-02 21:35:04
【问题描述】：

有没有办法从 CSS(3) 中插入 HTML 元素、dom 或代码？

【问题讨论】：

不，您不能从 CSS 插入 HTML 代码。

标签： html css

【解决方案1】：

没有。您唯一能做的就是使用:before 或:after 伪元素添加内容（而不是元素）。

【讨论】：

【解决方案2】：

内容（文本而非 html）：

http://www.quirksmode.org/css/content.html

但要明确一点，这是不好的做法。它在整个浏览器中的支持不稳定，通常不是一个好主意。但在你真的必须使用它的情况下，它就在那里。

【讨论】：

这是为什么呢？我使用 :after 使元素高度动态化。
一般来说，你会想用Javascript来实现这种事情。将getElementById 与.innerHTML 和.value 一起使用非常容易。
我不明白为什么这是不好的做法。你能详细说明吗？这只是浏览器支持问题吗？据我了解，所有现代浏览器都支持该属性。
@LwguRi 首先，是的，浏览器支持。 IE8 之前的 IE 不支持这个属性，Opera 9 支持它的方式与 Firefox 和 Chrome 不同。其次，正如我之前提到的，这是 Javascript 打算做的事情。这就像使用<font> 标签。从技术上讲，您可以并且它可以在过渡中工作，但您不使用它，因为这就是 CSS 的用途。你也可以用叉子喝汤，但这并不意味着这是个好主意。
@MT - 我不同意；如果我在<label> 和它的<input> 之间需要一个冒号（:），那是有代表性的。从技术上讲，这就是 CSS 的用途，但鉴于以上几点，我认为可以使用 JavaScript 代替。但是，如果您的意思是 @methyl 的示例更适合 JS，我认为我没有论据。

【解决方案3】：

不，你不能。您唯一能做的就是插入内容。像这样：

p:after {
    content: "yo";
}

【讨论】：

::after 是伪元素而不是伪类

【解决方案4】：

另一种方法（可能对您有用，具体取决于您要执行的操作）是将 HTML 放置到位，然后根据父元素的类使用 CSS 显示或隐藏它。

或

使用 jQuery append()

【讨论】：

【解决方案5】：

这是可以做到的。以 Firefox 为例

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>

ref 1

ref 2

【讨论】：