::before

Когда мы в 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.

        
          
          <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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать