使用 :before 和 :after CSS 选择器插入 HTML [重复]

Posted 2023-03-06

【中文标题】使用 :before 和 :after CSS 选择器插入 HTML [重复]

【英文标题】：Using :before and :after CSS selector to insert HTML [duplicate]

【发布时间】：2011-08-17 11:31:27

【问题描述】：

我想知道以下是否可能。我知道它不起作用，但也许我没有用正确的语法编写它。

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

有什么办法吗？

【问题讨论】：

请注意，这不是重复的。另一个问题专门询问<br> 或换行符，答案为该特殊情况提供了解决方案。如果您想添加标题和跨度标签，这将无济于事。

是的，这不应该被标记为重复。另一个问题询问特定标签。此外，这一篇中的答案更有帮助，也更容易从搜索引擎中找到。

将问题作为副本关闭并不是事实上是件坏事。您的问题仍然受到高度评价并且有一个很好的答案，并且能够通过找到答案来帮助更多的人。他们可能会在这里得到答案，或者另一个可能会提供更多帮助。每个人都赢了。

@Tas：我同意你的观点，“将问题作为重复而关闭并不是事实上是件坏事”。就链接其他问题而言，仅在评论中提及所谓的“重复问题”就足够了，但如果不是，则不要将这篇文章作为重复而关闭。

【参考方案1】：

content 不支持 html，只支持文本。您可能应该使用 javascript、jQuery 或类似的东西。

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

如果 content 确实支持 HTML，您可能会陷入无限循环，其中 content 被添加到 content 中。

【讨论】：

@Foxinni 不允许在 content 参数中使用 html 的更重要原因是 CSS 设计为在页面的单一传递中工作。如果有 html，则需要对其进行样式设置，这意味着 css 需要在完成其他所有样式的样式后返回并重新处理自身以设置 HTML 样式。这种额外的功能很少被任何人使用，但仍然会为每个人带来速度成本。

我认为不允许在内容中使用 html 的更根本原因是其中涉及的巨大安全风险。任何允许自定义 CSS 的网站都非常容易受到 XSS 攻击。

另一种可能性是使用新兴的标准 Web 组件而不是 css。然后你可以做类似的事情。 w3.org/TR/components-intro/#defining-a-custom-element

我最终找到了这个问题/答案，因为我正在寻找一种方法来拥有自定义列表样式并且仍然可以正确处理包装。这是我的解决方案：a list using a div for the list-style, a div for the content, and flex.。希望有一天这对某人有所帮助。