path: root/files/ru/web/css/_doublecolon_before/index.html

---
title: '::before (:before)'
slug: 'Web/CSS/::before'
tags:
  - CSS
  - Layout
  - Reference
  - Web
  - Псевдоэлементы
translation_of: 'Web/CSS/::before'
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">В CSS, <strong><code>::before</code></strong> создаёт <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a>,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}.</span> По умолчания является инлайновым.</p>

<pre class="brush: css"><code class="language-css"><span class="comment token">/* </span></code><code>Добавить сердце перед ссылками</code><code class="language-css"><span class="comment token"> */</span>
<span class="selector token">a<span class="pseudo-class token">::before</span> </span><span class="punctuation token">{
</span>  <span class="property token">content: "</span></code>♥<code class="language-css"><span class="property token">";</span>
<span class="punctuation token">}</span></code></pre>

<div class="note">
<p><strong>Примечание:</strong> Псведоэлементы, созданные с помощью <code>::before</code> и <code>::after</code> <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">содержатся в блоке форматирования элемента</a>, и поэтому не применяются к <em><a href="/ru/docs/Web/CSS/Replaced_element">замещаемым элементам</a></em>, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.</p>
</div>

<h2 id="Синтаксис">Синтаксис</h2>

{{csssyntax}}

<div class="note">
<p>В CSS3 появилась запись <code>::before</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:before</code>, введённую в CSS2.</p>
</div>

<h2 id="Примеры">Примеры</h2>

<h3 id="Добавление_кавычек">Добавление кавычек</h3>

<p>Этот простой пример использования псевдоэлементов <code>::before</code> позволяет добавлять кавычки. Здесь используется как псевдоэлемент <code>::before</code>, так и <code>{{Cssxref("::after")}}</code>.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush:html">&lt;q&gt;Немного кавычек&lt;/q&gt;, как он сказал, &lt;q&gt;лучше чем ничего.&lt;/q&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush:css">q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}</pre>

<h4 id="Результат">Результат</h4>

<p>{{EmbedLiveSample('Добавление_кавычек', '500', '50', '')}}</p>

<h3 id="Пример_оформления">Пример оформления</h3>

<p>Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.</p>

<h4 id="HTML_2">HTML</h4>

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

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">.ribbon {
  background-color: #5BC8F7;
}

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

<h4 id="Результат_2">Результат</h4>

<p>{{EmbedLiveSample('Пример_оформления', 450, 60)}}</p>

<h3 id="Список_дел">Список дел</h3>

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

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;Купить молока&lt;/li&gt;
  &lt;li&gt;Сходить на прогулку с собакой&lt;/li&gt;
  &lt;li&gt;Тренироваться&lt;/li&gt;
  &lt;li&gt;Написать код&lt;/li&gt;
  &lt;li&gt;Слушать музыку&lt;/li&gt;
  &lt;li&gt;Отдыхать&lt;/li&gt;
&lt;/ul&gt;
</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done');
  }
}, false);
</pre>

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

<h4 id="Результат_3">Результат</h4>

<p>{{EmbedLiveSample('Список_дел', 400, 300)}}</p>

<h2 id="Примечания">Примечания</h2>

<p>Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">спецификации CSS</a>: "Псевдоэлементы :before и :after взаимодействуют с другими элементами... как если бы они были настоящими элементами, добавленными в соответствующий им элемент."), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент <code>&lt;span&gt;</code>, как в примере ниже, вместо того чтобы добавлять два пустых элемента <code>&lt;div/&gt;</code> до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)</p>

<h4 id="HTML_4">HTML</h4>

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

<h4 id="CSS_4">CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="Результат_4">Результат</h4>

<p>{{EmbedLiveSample("Примечания")}}</p>

<h2 id="Спецификации">Спецификации</h2>

{{Specifications}}

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<div>
<p>{{Compat}}</p>
</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{Cssxref("::after")}}</li>
 <li>{{Cssxref("content")}}</li>
</ul>