如何使用 CSS（和 Javascript）添加 HTML？答案

【问题标题】：How to add HTML using CSS (and Javascript)?如何使用 CSS（和 Javascript）添加 HTML？
【发布时间】：2018-10-04 16:35:17
【问题描述】：

所以我使用 crm 来管理我的网站博客，这并没有给我提供 HTML 的完全灵活性。我正在尝试在第二或第三篇博客文章之后添加一个带有社交媒体图标的栏。在 CSS 样式表中，我使用“.class:nth-child(3)::after”访问了帖子。有没有办法使用javascript插入一个完整的html div来添加社交栏？或者我可以在同一个 html 文件中创建栏并根据帖子更改位置吗？

编辑：对不起，这是我的第一篇文章。

附加设计。 basicDesign

带有网页示例的样式表 sn-p。 CSSimage

【问题讨论】：

请提供您已经尝试过的任何代码示例。
@DanielBernardi 谢谢你的提示。我刚刚编辑了帖子以添加屏幕截图。
您必须使用 javascript。除了简单的文本之外，没有办法将复杂的 html 添加到伪元素。
Do not post images of code or errors! 图片和屏幕截图可以很好地添加到帖子中，但请确保帖子在没有它们的情况下仍然清晰有用。如果您发布代码或错误消息的图像，请确保您还复制并粘贴或直接在帖子中输入实际代码/消息。

标签： javascript html css hubspot

【解决方案1】：

您应该查看 CSS content 属性。它允许您指定要应用的 CSS 中的元素。它通常与::before 和 ::after 伪元素结合使用。

【讨论】：

我尝试了 ::after 伪元素。刚刚编辑了帖子并附上了我想要实现的截图。

【解决方案2】：

据我了解，您想在第三篇博文之后显示社交媒体图标？

如果您使用的是模板生成器，请在博客列表模块下方插入一个带有相应 HTML 的自定义模块。给它一个类，在这种情况下 -> 'social-media-blog'。

然后使用一些 jQuery，您可以将其设置为在第三篇博文之后显示。

var blogSocialMedia = $('.social-media-blog');
$(".post-listing .post-item:eq(3)").after(blogSocialMedia);

【讨论】：

这个问题太离题了。不要回答离题的问题。