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

    CSS

    ::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: "ⓘ" / "Дополнительная информация:";
}

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

    Читайте также