::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 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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::beforeChrome Full support 1
Full support 1
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :before
Edge Full support 12
Full support 12
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: :before
Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.
Notes Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position, float, list-style-* and some display properties.
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :before
IE Full support 9
Full support 9
Full support 8
Alternate Name
Alternate Name Uses the non-standard name: :before
Opera Full support 7
Full support 7
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :before
Safari Full support 4
Full support 4
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :before
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Alternate Name
Alternate Name Uses the non-standard name: :before
Chrome Android Full support 18
Full support 18
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: :before
Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :before
Opera Android Full support 10.1
Full support 10.1
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: :before
Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
Full support 1.0
Full support 1.0
Alternate Name
Alternate Name Uses the non-standard name: :before
Animation and transition supportChrome Full support 26Edge Full support 12Firefox Full support 4IE No support NoOpera Full support 15Safari No support NoWebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 4Opera Android Full support 14Safari iOS No support NoSamsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

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