--- title: '::before (:before)' slug: 'Web/CSS/::before' tags: - CSS - Web - Псевдо-елемент - Розмытка translation_of: 'Web/CSS/::before' ---
{{CSSRef}}

В CSS, ::before створює псевдо-елемент, що є першим дочірнім елементом вибраного елемента. Це часто використовується для косметичного вмісту елемента з властивістю {{cssxref("content")}}. Він за замовчуванням лінійний

/* Додає серце перед посиланнями */
a::before {
  content: "♥";
}

Нотатка: Псевдо-елемент згенерований за допомогою ::before і::after міститься в вікні форматування об'єкта, і таким чином не приймає замінювані елементи як  {{htmlelement("img")}}, або {{htmlelement("br")}} елементи.

Синтаксис

{{csssyntax}}

Нотатка: CSS3 представляє позначення ::before (з двома двокрапками) щоб розрізняти псевдо-класи і псевдо-елементи. Браузер також приймає  :before, представлений в CSS2.

Приклади

Додавання лапок

Простий приклад використання псевдо-елемента ::before додає лапки. Тут ми використовуємо і ::before і {{Cssxref("::after")}} замість символів лапок.

HTML

<q>Деякі цитати,</q> сказав він, <q> кращі за інші.</q>

CSS

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

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

Результат

{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}

Декоративний приклад

Ми можемо стилізувати текст чи зображення у властивості  {{cssxref("content")}} майже як завгодно.

HTML

<span class="ribbon">Зверніть увагу де помаранчевий блок</span>

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Подивіться на цей помаранчевий блок.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Результат

{{EmbedLiveSample('Decorative_example', 450, 60)}}

Список завдань

В цьому прикладі ми створимо простий список завдань, використовуючи псевдо-елемент. Цей метод може часто використовуватись щоб додавати невеликі штрихи до  UI щоб покращити user experience.

HTML

<ul>
  <li>Купити молоко</li>
  <li>Вигуляти собаку</li>
  <li>Вправи</li>
  <li>Писати код</li>
  <li>Грати музику</li>
  <li>Відпочити</li>
</ul>

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

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

Вище - код живого прикладу. Відмітьте, що ми не використовуємо іконки, а галочкою являється псевдо-елемент ::before  які стилізовані за допомогою CSS.

Результат

{{EmbedLiveSample('To-do_list', 400, 300)}}

Нотатки

Також виправлення позиціонування в Firefox 3.5 не дозволяють вмісту бути згенерованим як окремий попередній елемент (відповідно до специфікації CSS "Псевдо-елемент :before і :after впливають на інші блоки так як вони були б справжніми елементами"), Вони можуть використовуватись, щоб впроваджувати незначні поліпшення для  не табличних розміток.  (наприклад, щоб досягти центрування) в випадку  доки вміст, що має центруватись  поміщений в дочірній наступний , колонка до і після контенту може бути представлена без додавання попереднього чи наступного сусіднього блоку (наприклад, це, можливо, найбільш семантично правильніше, додавати допоміжний span як нижче, чим додавати  <div/>  перед і після). (І завжди пам'ятайте додавати ширину до  float об'єкта, інакше він не буде обтікати!)

HTML

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

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;
}

Результат

{{EmbedLiveSample("Notes")}}

Специфікація

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

Підтримка браузерів

{{Compat("css.selectors.before")}}

Дивіться також