::before (:before)

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

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

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

Синтаксис

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

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

Приклади

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

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

HTML

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

CSS

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

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

Результат

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

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

HTML

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

CSS

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

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

Результат

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

В цьому прикладі ми створимо простий список завдань, використовуючи псевдо-елемент. Цей метод може часто використовуватись щоб додавати невеликі штрихи до  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.

Результат

Нотатки

Також виправлення позиціонування в 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;
}

Результат

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

Специфікація Статус Коментар
CSS Pseudo-Elements Level 4
The definition of '::before' in that specification.
Working Draft No significant changes to the previous specification.
CSS Transitions Working Draft Allows transitions on properties defined on pseudo-elements.
CSS Animations Level 1 Working Draft Allows animations on properties defined on pseudo-elements.
Selectors Level 3
The definition of '::before' in that specification.
Recommendation Introduces the two-colon syntax.
CSS Level 2 (Revision 1)
The definition of '::before' in that specification.
Recommendation Initial definition, using the one-colon syntax

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

BCD tables only load in the browser

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