使用:before和:在CSS选择器之后插入Html

Question

我想知道以下是否可行.我知道它不起作用,但也许我不是用正确的语法编写它.

li.first div.se_bizImg:before{
    content: "<h1>6 Businesses Found <span class="headingDetail">(view all)</span></h1>";
}

无论如何这样做？

Answer 1

content不支持HTML,只支持文本.你可能应该使用jQuery或类似的东西.

你的代码的另一个问题是"在一个"块内.你应该混合'和"(class='headingDetail').

如果content支持HTML,你最终可能会在无限循环中content添加内部content.

@Foxinni在内容参数中不允许使用html的更重要原因是CSS被设计为在页面的单个传递中工作.如果有html,则需要进行样式设置,这意味着css需要重新处理并重新处理自己,以便在完成其他所有内容的样式后对HTML进行样式设置.这个额外的功能很少被任何人使用,但仍会给每个人带来速度成本. (81认同)
我认为不允许html内容的更根本原因是其中涉及的巨大安全风险.任何允许自定义CSS的站点都会对XSS攻击非常开放. (18认同)
另一种可能性是使用新兴的标准Web组件而不是css.然后你可以做那样的事情.http://www.w3.org/TR/components-intro/#defining-a-custom-element (3认同)
我最终找到了这个问题/答案，因为我正在寻找一种具有自定义列表样式并仍然正确处理换行的方法。这是我的解决方案：[使用 div 表示列表样式、使用 div 表示内容和 flex 的列表。](https://codepen.io/yehudamakarov/pen/Mzmjxx)。希望有一天这会对某人有所帮助。 (2认同)