::before (:before)
==================

В CSS, **`::before`** создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства `content`. По умолчания является инлайновым.


```css
/\* Добавить сердце перед ссылками \*/
a::before {
  content: "♥";
}
```


**Примечание:** Псведоэлементы, созданные с помощью `::before` и `::after` содержатся в блоке форматирования элемента, и поэтому не применяются к *замещаемым элементам*, таким как `<img>` или `<br>`.

Синтаксис
---------

Error: could not find syntax for this item

**Примечание:** В CSS3 появилась запись `::before` (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись `:before`, введённую в CSS2.

Примеры
-------

### Добавление кавычек

Этот простой пример использования псевдоэлементов `::before` позволяет добавлять кавычки. Здесь используется как псевдоэлемент `::before`, так и ``::after``.

#### HTML


```html
<q>Немного кавычек</q>, как он сказал, <q>лучше чем ничего.</q>
```


#### CSS


```css
q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}
```


#### Результат

### Пример оформления

Можно стилизовать текст или изображения в свойстве `content` практически любым способом.

#### HTML


```html
<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>
```


#### CSS


```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "Посмотрите на этот оранжевый прямоугольник.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```


#### Результат

### Список дел

В этом примере мы создадим простой список дел,используя псевдоэлементы. Этот метод часто применяется для добавления небольших штрихов в пользовательский интерфейс и улучшения впечатления пользователей.

#### HTML


```html
<ul>
  <li>Купить молока</li>
  <li>Сходить на прогулку с собакой</li>
  <li>Тренироваться</li>
  <li>Написать код</li>
  <li>Слушать музыку</li>
  <li>Отдыхать</li>
</ul>
```


#### CSS


```css
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}
```


#### JavaScript


```js
var list = document.querySelector("ul");
list.addEventListener(
  "click",
  function (ev) {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);
```


Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом `::before`, стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.

#### Результат

Примечания
----------

Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно спецификации CSS: "Псевдоэлементы :before и :after взаимодействуют с другими элементами... как если бы они были настоящими элементами, добавленными в соответствующий им элемент."), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент `<span>`, как в примере ниже, вместо того чтобы добавлять два пустых элемента `<div/>` до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)

#### HTML


```html
<div class="example">
  <span id="floatme"
 >"Плавающий перед" будет добавлен слева от текста и не позволит переполнению
    этой строки обтекать его снизу. Аналогично, "Плавающий после" будет добавлен
    справа от текста и не позволит переполнению этой строки обтекать его
    снизу.</span
 >
</div>
```


#### CSS


```css
#floatme {
  float: left;
  width: 50%;
}

/\* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) \*/
.example::before {
  content: "Плавающий перед";
  float: left;
  width: 25%;
}
.example::after {
  content: "Плавающий после";
  float: right;
  width: 25%;
}

/\* Для стилизации \*/
.example::before,
.example::after {
  background: yellow;
  color: red;
}
```


#### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `::after`
* `content`