Вставьте текст или изображения в любое место вашего сайта с помощью псевдоэлементов CSS

[Discourse]

Итак, вы хотите вставить текст или изображение на ваш сайт Discourse.

Что касается текста, то в большинстве случаев достаточно изменить его через /admin/customize/site_texts.
Однако иногда нам хочется добавить предложение между двумя отдельными блоками, а не изменять один из существующих элементов.

Давайте посмотрим, как это сделать, используя свойства :before и :after в CSS3.

Основные шаги

1. Для работы нам понадобится консоль разработчика, которая есть в основных браузерах. Чтобы открыть её, просто нажмите F12.

   

2. Выберите элемент, перед которым (before) или после которого (after) вы хотите добавить текст.

   

   Как видите, при наведении мыши на элемент он подсвечивается, а соответствующий класс автоматически выбирается в HTML и CSS справа. Перед редактированием таблицы стилей Discourse проведите живое тестирование: после выбора элемента, над которым вы хотите работать, просто нажмите на иконку . Это добавит новое правило в CSS, которое мы сможем изменить в соответствии с нашими потребностями.

3. Начните редактирование. Добавьте суффикс :before или :after к классу и добавьте текст, используя свойство content.

   Добавление изображения немного сложнее, если вы не знаете CSS, но хорошей практикой будет следовать похожему шаблону:

   background-image: url("ссылка-сюда");
   background-repeat: no-repeat;
   background-size: ваше-значение;
   content: "";
   width: ваше-значение;
   height: ваше-значение;
   display: inline-block;
   

   До:

   

   И после:

   

   Помните, что текст появится там, где используется выбранный вами класс. Иногда нужно указать, на каком элементе должен появиться новый текст, добавив родительский элемент в CSS.

4. Настройте его. Зная немного CSS, легко настроить стиль текста так, как вам нужно.

   

   .fancy-title::after {
     content: "ЕЩЁ ОДИН ТЕКСТ " "\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::before {
    background-image: url(ваша-ссылка-сюда);
    background-repeat: no-repeat;
    background-size: 750px 335px;
    width: 750px;
    height: 335px;
    display: inline-block;
    content: "";
  }
  
  #topic-title::after {
    background-image: url(ваша-ссылка-сюда);
    background-repeat: no-repeat;
    background-size: 800px 295px;
    width: 800px;
    height: 295px;
    display: inline-block;
    content: "";
  }
  

• Тело темы

  

  .topic-body.clearfix::before {
    background-image: url(ваша-ссылка-сюда);
    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 ВЕЛИКОЛЕПЕН!";
    color: red;
    font-weight: bold;
    padding-left: 11px;
  }
  

  
  

• Кнопки сообщений

  
  

  .nav.post-controls .actions::before {
    color: red;
    content: "Привет от Discourse";
  }
  

• Лента времени

  

  .topic-timeline::before {
    color: red;
    content: "Hello World";
  }
  
  .topic-timeline::after {
    color: red;
    content: "Hello again";
  }
  
  .timeline-scroller-content::before {
    color: violet;
    content: "Привет,";
  }
  
  .timeline-scroller-content::after {
    color: violet;
    content: "Это снова я!";
  }
  
  .timeline-container .topic-timeline .start-date::before {
    color: goldenrod;
    content: "Дата начала ";
  }
  
  .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: " Текущая дата";
  }
  

• Кнопки в футере

  

  #topic-footer-buttons::before {
    content: "ЭТО КНОПКИ В ФУТЕРЕ";
    color: indianred;
    border: 2px solid;
    padding: 3px;
  }
  
  #topic-footer-buttons::after {
    color: indianred;
    content: "КОНТЕНТ ПОСЛЕ ИДЁТ ЗДЕСЬ";
    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: " Поделиться";
  }
  
  .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
    content: " Нравится";
  }
  

Ссылка: https://meta.discourse.org/t/insert-text-disclaimer-anywhere-in-discourse/99009

---

Примечание: Псевдоэлементы, генерируемые ::before и ::after, ограничены рамкой форматирования элемента, и поэтому не применяются к замещаемым элементам, таким как <img>, или к элементам <br>. Источник: ::after CSS pseudo-element - CSS | MDN

Другими словами, это не будет работать для «самозакрывающихся» элементов, которые не могут иметь дочерних элементов. Интуитивно кажется, что псевдоэлементы расположены так:

{::before здесь}<tag>содержимое текста</tag>{::after здесь}

но на самом деле это

<tag>{::before здесь}содержимое текста{::after здесь}</tag>

---

Этот документ находится под контролем версий — предлагайте изменения на GitHub.