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

---
title: '::before (:before)'
slug: 'Web/CSS/::before'
tags:
  - CSS
  - 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>
<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="/en-US/docs/Web/CSS/Replaced_element">замінювані елементи</a> як </em> {{htmlelement("img")}}, або {{htmlelement("br")}} елементи.</p>
</div>

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

{{csssyntax}}

<div class="note">
<p><strong>Нотатка:</strong> CSS3 представляє позначення <code>::before</code> (з двома двокрапками) щоб розрізняти <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдо-класи</a> і <a href="/en-US/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('Adding_quotation_marks', '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('Decorative_example', 450, 60)}}</p>

<h3 id="Список_завдань">Список завдань</h3>

<p>В цьому прикладі ми створимо простий список завдань, використовуючи псевдо-елемент. Цей метод може часто використовуватись щоб додавати невеликі штрихи до  UI щоб покращити user experience.</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('To-do_list', 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 впливають на інші блоки так як вони були б справжніми елементами"), Вони можуть використовуватись, щоб впроваджувати незначні поліпшення для  не табличних розміток.  (наприклад, щоб досягти центрування) в випадку  доки вміст, що має центруватись  поміщений в дочірній наступний , колонка до і після контенту може бути представлена без додавання попереднього чи наступного сусіднього блоку (наприклад, це, можливо, найбільш семантично правильніше, додавати допоміжний span як нижче, чим додавати  &lt;div/&gt;  перед і після). (І завжди пам'ятайте додавати ширину до  float об'єкта, інакше він не буде обтікати!)</p>

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

<pre class="brush: html">&lt;div class="example"&gt;
&lt;span id="floatme"&gt;"Floated Before" має згенеруватись ліворуч від
вікна перегляду і не виносити за межі рядка на потік нижче. Аналогічно
"Floated After" має з'являтись праворуч&lt;/span&gt;
&lt;/div&gt;</pre>

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

<pre class="brush: css">#floatme { float: left; width: 50%; }

/* Щоб отримати пусту колонку просто позначте в hex коді
  нерозривний пробіл: \a0 у якості контенту
(Використовуйте \0000a0 коли іде після такого символа як пробіл )
*/
.example::before {
  content: "Floated Before";
  float: left;
  width: 25%;
}
.example::after {
  content: "Floated After";
  float: right;
  width: 25%;
}

/* For styling */
.example::before, .example::after {
  background: yellow;
  color: red;
}</pre>

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

<p>{{EmbedLiveSample("Notes")}}</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Специфікація</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментар</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>No significant changes to the previous specification.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
   <td>{{Spec2("CSS3 Transitions")}}</td>
   <td>Allows transitions on properties defined on pseudo-elements.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Animations", "", "")}}</td>
   <td>{{Spec2("CSS3 Animations")}}</td>
   <td>Allows animations on properties defined on pseudo-elements.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Introduces the two-colon syntax.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition, using the one-colon syntax</td>
  </tr>
 </tbody>
</table>

<h2 id="Підтримка_браузерів">Підтримка браузерів</h2>

<div>
<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div>

<p>{{Compat("css.selectors.before")}}</p>
</div>

<h2 id="Дивіться_також">Дивіться також</h2>

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