::before — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. Подсказки
  6. На практике
    1. Денис Ежков советует

Кратко

Скопировано

Когда мы в CSS добавляем ::before к селектору, для соответствующего элемента создаётся псевдоэлемент. Этот псевдоэлемент — его самый первый потомок, он идёт до внутреннего содержимого.

Пример

Скопировано

a::before {  content: "♥";}
          a::before {
  content: "♥";
}

Как пишется

Скопировано

::before {  /* Для CSS 3 */}:before {  /* Для CSS 2 */}
          ::before {
  /* Для CSS 3 */
}
:before {
  /* Для CSS 2 */
}

💡 В CSS 3 версии ввели написание с двумя двоеточиями, чтобы отличать запись псевдоэлемента от псевдокласса. Но синтаксис с одним двоеточием также поддерживается современными браузерами.

Как понять

Скопировано

Проще всего воспринимать псевдоэлемент ::before как дополнительный элемент в начале тега. Мы можем применить к нему любые стили.

Чаще всего псевдоэлемент используется для оформительских целей, либо позволяя добавить дополнительное содержимое перед текстом, либо выступая в роли дополнительного стилизованного блока.

По умолчанию псевдоэлемент ::before является строчным.

Самый простой пример использования ::before — добавление иконки перед важным текстом:

<div>  <p>Внимание! Этот абзац является важным предупреждением!</p></div><div>  <p>Этот абзац является информационным.</p></div>
          <div>
  <p>Внимание! Этот абзац является важным предупреждением!</p>
</div>
<div>
  <p>Этот абзац является информационным. </p>
</div>

.warning::before {  content: "⚠";  margin-right: 0.5em;}
          .warning::before {
  content: "⚠";
  margin-right: 0.5em;
}
Открыть демо в новой вкладке

Подсказки

Скопировано

💡 Не забывайте прописывать свойство content для псевдоэлемента ::before. Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.

💡 Псевдоэлемент ведёт себя ровно так же, как любой другой элемент в разметке, подчиняется тем же свойствам и законам. Просто его нет в HTML.

На практике

Скопировано

Денис Ежков советует

Скопировано

🛠 Псевдоэлемент ::before очень часто используют для стилизации нестандартных маркеров списка:

<ul>  <li>Сделать настоящее тату</li>  <li>Посмотреть «Звездные войны»</li>  <li>Научиться играть на укулеле</li>  <li>Не бриться полгода</li>  <li>Поучаствовать в чайной церемонии</li></ul>
          <ul>
  <li>Сделать настоящее тату</li>
  <li>Посмотреть «Звездные войны»</li>
  <li>Научиться играть на укулеле</li>
  <li>Не бриться полгода</li>
  <li>Поучаствовать в чайной церемонии</li>
</ul>

 
li::before {  content: "💜";  margin-right: 5px;}
          li::before {
  content: "💜";
  margin-right: 5px;
}
Открыть демо в новой вкладке

🛠 Пример с пустым свойством content:

<ul>  <li>Милый маленький грибочек</li>  <li>Сколопендровый листочек</li>  <li>Жёлтой пыльки чуть</li></ul>
          <ul>
  <li>Милый маленький грибочек</li>
  <li>Сколопендровый листочек</li>
  <li>Жёлтой пыльки чуть</li>
</ul>

 
li {  position: relative;  padding-left: 25px;}li::before {  /* Не забываем о свойстве content */  content: "";  width: 14px;  height: 14px;  background-color: #2E9AFF;  position: absolute;  left: 0;  top: 5px;}
          li {
  position: relative;
  padding-left: 25px;
}
li::before {
  /* Не забываем о свойстве content */
  content: "";
  width: 14px;
  height: 14px;
  background-color: #2E9AFF;
  position: absolute;
  left: 0;
  top: 5px;
}
Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так.

Попробуйте ещё раз?

←

Псевдоэлементы

ctrl + alt + ←

→

::after

ctrl + alt + →

CSS ::before Selector

❮ Предыдущий Справочник по селекторам CSS Далее ❯


Пример

Вставить текст перед содержимым каждого элемента

:

p::before {
content: «Читать это: «;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Селектор ::before вставляет что-то перед содержимым каждого выбранного элемента(ов).

Используйте свойство содержимого, чтобы указать содержимое для вставки.

Используйте селектор ::after, чтобы вставить что-то после содержимого.

Версия: CSS2

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
::до 4,0 9,0 3,5 3.1 7,0

Синтаксис CSS

::before {
  объявления css ;
}

Дополнительные примеры

Пример

Вставить содержимое перед каждым содержимым элемента

и задать стиль для вставленного содержимого:

p::before {
content: «Читать это -«;
цвет фона: желтый;
красный цвет;
вес шрифта: полужирный;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Псевдоэлементы CSS

Справочник по селектору CSS: CSS ::after selector

❮ Предыдущий Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top4 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

html — что на самом деле делает ::before?

спросил

Изменено 3 года, 1 месяц назад

Просмотрено 22к раз

Итак, я прочитал документы и, вероятно, понял цель ::до и ::после . Если я правильно понимаю, они всегда должны работать в сочетании с другими элементами. Но веб-страница, на которую я смотрю, имеет что-то вроде этого:

 
    <дел>
        ::до
        <дел> ... 
        ::после
<тело>

Я не могу понять, что здесь делают ::до и ::после ?

  • HTML
  • CSS
  • гугл-хром
  • css-селекторы

6

::before и ::after относятся к псевдоэлементам CSS, которые создаются до и после соответствующих элементов.

Псевдоэлементы обычно не отображаются в деревьях элементов HTML. Однако, если вы используете правильный инструмент отладки (например, инспектор Chrome), вы можете увидеть эти специальные элементы. Поскольку в настоящее время очень распространено оформление страницы с помощью псевдоселекторов, очень полезно иметь инструмент отладки, который может их отображать.

Чтобы проверить это поведение с помощью инспектора Chrome (или другого подходящего инструмента), попробуйте добавить некоторый контент в некоторые из этих псевдоэлементов с помощью CSS, например:

 h2:before {
  содержание: «до»;
}

2

Я предполагаю, что вы видите это, потому что инспектор Chrome показывает это для проверки: http://www.youtube.com/watch?v=AcKlJbmuxKo

На самом деле они не в исходном html, предоставленном с сервера, но добавлены Только Chrome Inspector.

Вы можете использовать их для просмотра их блочной модели на экране и объявленных для них стилей.

No related posts.