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

**URL:** https://meta.discourse.org/t/insert-text-or-images-anywhere-on-your-site-using-css-pseudo-elements/99200
**Category:** Developer Guides
**Tags:** how-to, customization
**Created:** [11.Октябрь.2018 11:12:34 UTC](https://meta.discourse.org/t/insert-text-or-images-anywhere-on-your-site-using-css-pseudo-elements/99200 "2018-10-11T11:12:34Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [11.Октябрь.2018 11:12:34 UTC](https://meta.discourse.org/t/insert-text-or-images-anywhere-on-your-site-using-css-pseudo-elements/99200/1 "2018-10-11T11:12:34Z")

</div>

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

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

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

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

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

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

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

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

5. Когда будете довольны результатом, добавьте изменения в CSS вашего сайта, [создав компонент темы](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648).

* * *

Перейдём к практическим примерам:

- **Заголовок темы**

- **Тело темы**

- **Кнопки сообщений**

- **Лента времени**

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

- **Предлагаемые темы**

- **Действия темы**

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

* * *

> **Примечание:** Псевдоэлементы, генерируемые `::before` и `::after`, [ограничены рамкой форматирования элемента](https://www.w3.org/TR/CSS2/generate.html#before-after-content), и поэтому не применяются к _[замещаемым элементам](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)_, таким как [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), или к элементам [`<br>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br). Источник: [::after CSS pseudo-element - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::after)

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

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

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

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

* * *

Этот документ находится под контролем версий — предлагайте изменения [на GitHub](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/22-pseudo-elements.md).