::after

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

        
          
          a::after {  content: "→";}
          a::after {
  content: "→";
}

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

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

:after {
  /* Для CSS 2 */
}

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

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

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

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

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

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

        
          
          <article>  <h1>    «Все берут в горсть и нюхают: ааа… гру-шовка!»: вспоминаем, как писали об    <span class="accent">ароматах</span> классики  </h1>  <p>«Все кидаются в лопухи, в крапиву...»</p>  <p>«Лето Господне», Иван Шмелев</p></article>
          <article>
  <h1>
    «Все берут в горсть и нюхают: ааа… гру-шовка!»: вспоминаем, как писали об
    <span class="accent">ароматах</span> классики
  </h1>
  <p>«Все кидаются в лопухи, в крапиву...»</p>
  <p>«Лето Господне», Иван Шмелев</p>
</article>

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

        
          
          .accent::before,.accent::after {  content: "🌸";  vertical-align: middle;  font-size: 0.6em;}.accent::before {  margin-right: 0.1em;}.accent::after {  margin-left: 0.1em;}
          .accent::before,
.accent::after {
  content: "🌸";
  vertical-align: middle;
  font-size: 0.6em;
}

.accent::before {
  margin-right: 0.1em;
}

.accent::after {
  margin-left: 0.1em;
}

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

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

        
          
          <a href="#" class="link">выбери меня</a>
          <a href="#" class="link">выбери меня</a>

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

        
          
          .link {  position: relative;}.link::before,.link::after {  content: "";  height: 14px;  width: 14px;  position: absolute;  transition: all 0.6s;}.link::before {  top: 0;  left: 0;  border-top: 6px solid #000000;  border-left: 6px solid #000000;}.link::after {  bottom: 0;  right: 0;  border-bottom: 6px solid #000000;  border-right: 6px solid #000000;}.link:hover::before,.link:hover::after {  width: 100%;  height: 100%;  transition: all 0.3s;}
          .link {
  position: relative;
}

.link::before,
.link::after {
  content: "";
  height: 14px;
  width: 14px;
  position: absolute;
  transition: all 0.6s;
}

.link::before {
  top: 0;
  left: 0;
  border-top: 6px solid #000000;
  border-left: 6px solid #000000;
}

.link::after {
  bottom: 0;
  right: 0;
  border-bottom: 6px solid #000000;
  border-right: 6px solid #000000;
}

.link:hover::before,
.link:hover::after {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

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

        
          
          <a href="https://doka.guide/css/pseudoelements/">Узнать больше про псевдоэлементы в Доке</a>
          <a href="https://doka.guide/css/pseudoelements/">Узнать больше про псевдоэлементы в Доке</a>

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

        
          
          @media print {  a {    text-decoration: none;  }  a::after {    content: " (ссылка: " attr(href) ")";  }}
          @media print {
  a {
    text-decoration: none;
  }

  a::after {
    content: " (ссылка: " attr(href) ")";
  }
}

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