使用 CSS 伪元素在网站的任何位置插入文本或图片

文档 开发者指南
,
1

所以，你想在你的 Discourse 站点中插入一些文本或图片。

对于文本，在大多数情况下，只需通过 /admin/customize/site_texts 进行修改即可。
然而，有时我们希望将一句话添加到两个不同的块之间，而不是修改现有的元素之一。

让我们看看如何使用 CSS3 中的 :before 和 :after 属性来实现这一点。

基本步骤

  1. 为了进行操作，我们需要使用主流浏览器中存在的开发者控制台。要打开它，只需按 F12 键。

    image
    image1911×879 101 KB

  2. 选择你要添加 before 或 after 文本的元素。

    chooseelements

    如你所见，每当鼠标悬停在某个元素上时，该元素会被高亮显示，右侧的 HTML 和 CSS 中会自动选择相应的类。在编辑 Discourse 样式表之前，请先进行实时测试。因此，在选择要操作的元素后，只需点击 :heavy_plus_sign: 图标即可。这将向 CSS 添加一条新规则，我们可以根据需要对其进行修改。

  3. 开始编辑。为类名添加后缀 :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;

    之前：

    image
    image1920×885 98.3 KB

    之后：

    image
    image1920×887 99.4 KB

    请记住，文本将出现在你选择的特定类被使用的任何位置。有时你需要指定希望新文本出现在哪个元素上，方法是在 CSS 中添加父元素。

  4. 进行自定义。了解一些 CSS 知识后，你可以轻松地将文本样式自定义为你想要的样子。

    image
    image760×204 7.98 KB

    .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;
}

  5. 一旦满意，请通过创建主题组件将你的更改添加到站点的 CSS 中。

我们继续看一些实用示例：

  • 主题标题 (Topic Title)

    对于某些站点，在标题或每个帖子之前或之后添加图片、横幅或个性化广告可能很有用。

    image
    image952×796 201 KB

    #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)

    image
    image677×610 21.7 KB

    .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;
}

    或者在之后：

    image
    image765×791 30.3 KB

    只需将 .topic-body.clearfix::before 更改为 .topic-body.clearfix::after 即可。
    同样，也可以在 before 或 after 位置添加纯文本：

    .topic-body.clearfix::before {
  content: "DISCOURSE ROCKS!";
  color: red;
  font-weight: bold;
  padding-left: 11px;
}

    image
    image964×746 32.7 KB

    image
    image945×754 32.8 KB

  • 帖子按钮 (Post Buttons)

    image
    image974×445 20.1 KB

    image
    image979×457 20.3 KB

    .nav.post-controls .actions::before {
  color: red;
  content: "Hello from Discourse";
}

  • 时间线 (Timeline)

    image
    image330×664 6.31 KB

    .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";
}

  • 页脚按钮 (Footer Buttons)

    image
    image958×257 9.77 KB

    #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)

    image
    image995×824 40.6 KB

    #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;
}

  • 主题操作 (Topic Actions)

    Screen Shot 2021-09-09 at 13.55.40
    Screen Shot 2021-09-09 at 13.55.40672×122 3.21 KB

    .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 pseudo-element - CSS | MDN

换句话说，这对于无法拥有子元素的“自闭合”元素不起作用。直觉上我们可能认为伪元素是这样的：

{::before is here}<tag>text content</tag>{::after is here}

但实际上它是这样的：

<tag>{::before is here}text content{::after is here}</tag>

本文档受版本控制 - 请在 github 上提出修改建议。

33 个赞
How to add a link to the no-access message
Add custom 'Login' Link to Invite Acceptance
Adding code beneath the Timeline