Клавиша / esc
Рука подставляет сердечки на место маркеров в список «Причины, почему я люблю Доку»
Иллюстрация: Кира Кустова

::before

Удобный способ создать элемент без дополнительной HTML-разметки.

Время чтения: меньше 5 мин

Кратко

Скопировано

Когда мы в 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 class="message">  <p class="warning">Внимание! Этот абзац является важным предупреждением!</p></div><div class="message">  <p class="info">Этот абзац является информационным.</p></div>
          <div class="message">
  <p class="warning">Внимание! Этот абзац является важным предупреждением!</p>
</div>

<div class="message">
  <p class="info">Этот абзац является информационным.</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;
}

        
        
          
        
      
Открыть демо в новой вкладке

Татьяна Фокина советует

Скопировано

🛠 У псевдоэлемента ::before с символами или графикой в content может быть альтернативное описание. Добавьте его через косую черту (/) после основного значения. Видимый текст не изменится, но для вспомогательных технологий и браузеров описание попадёт в название элемента.

Опишем знак дополнительной информации «ⓘ»:

        
          
          span::before {  content: "ⓘ" / "Дополнительная информация:";}
          span::before {
  content: "ⓘ" / "Дополнительная информация:";
}

        
        
          
        
      

Конечно, важные для смысла элементы стоит добавлять через HTML, а не CSS. Если такой возможности нет, используйте дополнительный синтаксис у content с умом. Обычно это ситуации, когда скринридеры не знакомы с символом или не могут озвучить иконку из ::before. Например, они никак не опишут символ «ⓘ» или озвучат из чего он состоит: «Маленькая буква „i“ внутри круга».

Альтернативное описание в content лучше вообще не задавать ссылкам и другим интерактивным элементам. Дело в том, что о нём не узнают пользователи голосового управления. Разберём на примере:

        
          
          <a href="#">  Часто задаваемые вопросы и ответы</a>
          <a href="#">
  Часто задаваемые вопросы и ответы
</a>

        
        
          
        
      
        
          
          /* Не делайте так ❌ */a::before {  content: "ⓘ" / "Дополнительная информация:";}
          /* Не делайте так ❌ */
a::before {
  content: "ⓘ" / "Дополнительная информация:";
}

        
        
          
        
      

Браузеры и скринридеры решат, что ссылка называется «Дополнительная информация: Часто задаваемые вопросы и ответы». Пользователи голосового управления увидят только «Часто задаваемые вопросы и ответы». Ничего не произойдёт, когда они попробуют перейти по ссылке командой «Часто задаваемые вопросы и ответы, клик».