所以，您想在 Discourse 站点中插入一些文本或图片。
关于文本，在大多数情况下，只需通过 /admin/customize/site_texts 进行修改即可。
但有时，我们希望在两个不同的区块之间添加一句话，而不是修改现有的某个元素。
让我们看看如何在 CSS3 中使用 :before 和 :after 属性来实现这一点。
基本步骤
-
要完成此操作，我们需要使用主流浏览器自带的开发者控制台。只需按 F12 键即可打开它。
-
选择您希望在其“之前”或“之后”添加文本的元素。
如您所见，每当鼠标悬停在某个元素上时，该元素会被高亮显示，右侧 HTML 和 CSS 面板中会自动选中对应的类。在编辑 Discourse 样式表之前，请先进行实时测试。因此，在选定要操作的元素后，只需点击
图标。这将在 CSS 中添加一条新规则，我们可以根据需要进行修改。 -
开始编辑。在类名后添加后缀
:before或:after，并使用content属性添加文本。如果您不熟悉 CSS，添加图片会稍微复杂一些，但遵循类似的模式是个好习惯：
background-image: url("url-goes-here"); background-repeat: no-repeat; background-size: your-value; content: ""; width: your-value; height: your-value; display: inline-block;修改前：
修改后：
请记住，文本将出现在您选定的特定类被使用的任何位置。有时，您需要指定新文本出现的具体元素，这可以通过在 CSS 中添加父元素来实现。
-
进行自定义。只要了解一点 CSS，就可以轻松按照您的意愿自定义文本样式。
.fancy-title::after { content: "ANOTHER TEXT " "\f072"; color: violet; font-family: Fontawesome; background: linear-gradient(to right, #7ce5df 27%, #f1da36 100%); font-size: 18px; padding: 2px 4px; border: 1px solid; } -
满意后，通过 创建主题组件 将您的更改添加到站点的 CSS 中。
接下来我们来看一些实际示例：
-
主题标题
对于某些站点，在标题或每篇帖子的 之前 或 之后 添加图片、横幅或个性化广告可能很有用。
#topic-title::before { background-image: url(your-URL-here); background-repeat: no-repeat; background-size: 750px 335px; width: 750px; height: 335px; display: inline-block; content: ""; } #topic-title::after { background-image: url(your-URL-here); background-repeat: no-repeat; background-size: 800px 295px; width: 800px; height: 295px; display: inline-block; content: ""; } -
主题正文
.topic-body.clearfix::before { background-image: url(your-URL-here); max-height: 2.8571em; width: 690px; height: 184px; background-size: auto 2.8571em; background-repeat: no-repeat; margin-left: 11px; margin-bottom: 0.25em; }或者在 之后：
只需将
.topic-body.clearfix::before改为.topic-body.clearfix::after。
同样，也可以在 之前 或 之后 添加纯文本：.topic-body.clearfix::before { content: "DISCOURSE ROCKS!"; color: red; font-weight: bold; padding-left: 11px; } -
帖子按钮
.nav.post-controls .actions::before { color: red; content: "Hello from Discourse"; } -
时间线
.topic-timeline::before { color: red; content: "Hello World"; } .topic-timeline::after { color: red; content: "Hello again"; } .timeline-scroller-content::before { color: violet; content: "Hey,"; } .timeline-scroller-content::after { color: violet; content: "It's me again!"; } .timeline-container .topic-timeline .start-date::before { color: goldenrod; content: "Start Date "; } timeline-container .topic-timeline .start-date::after { color: goldenrod; content: " \f060"; font-family: Fontawesome; } .widget-link.now-date::before { content: "\f061 "; color: burlywood; font-family: Fontawesome; } .widget-link.now-date::after { color: burlywood; content: " Now Date"; } -
页脚按钮
#topic-footer-buttons::before { content: "THESE ARE FOOTER BUTTONS"; color: indianred; border: 2px solid; padding: 3px; } #topic-footer-buttons::after { color: indianred; content: "CONTENT AFTER GO HERE"; border: 2px solid; }在后一种情况下，需要注意的是，
:after内容是在一段文本之后插入的。如果您不需要特殊的自定义，建议通过/admin/customize/site_texts修改原始文本，而不是编辑 CSS。 -
推荐主题
#suggested-topics::before { content: ""; background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png); width: 690px; height: 184px; background-size: 690px 184px; background-repeat: no-repeat; display: inline-block; } #suggested-topics::after { content: ""; background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png); width: 690px; height: 184px; background-size: 690px 184px; background-repeat: no-repeat; display: inline-block; } -
主题操作
.widget-button.btn-flat.share.no-text.btn-icon::after { content: " Share"; } .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after { content: " Like"; }
参考：https://meta.discourse.org/t/insert-text-disclaimer-anywhere-in-discourse/99009
注意： 由
::before和::after生成的伪元素 包含在元素的格式化框内，因此不适用于 替换元素（如<img>）或<br>元素。来源：::after - CSS：层叠样式表 | MDN
换句话说，这不适用于无法包含子元素的“自闭合”元素。直观地看，伪元素可能像是：
{::before 在这里}<tag>文本内容</tag>{::after 在这里}
但实际情况是：
<tag>{::before 在这里}文本内容{::after 在这里}</tag>
本文档已进行版本控制——如有修改建议，请 在 GitHub 上提出。