::after

Загадочный элемент, которого нет в разметке. Но вот же он, стоит после настоящего элемента!

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

Кратко

Скопировано

Когда мы в 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. Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.

На практике

Скопировано

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

Скопировано

🛠 Псевдоэлементы ::before и ::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;
}

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

В этом примере рамки применены к псевдоэлементам ::before и ::after. При этом сами псевдоэлементы используются как два дополнительных стилизуемых элемента внутри ссылки <a>. Круто, правда? В HTML пишем один тег, а по факту можем стилизовать аж три! 🤘

Егор Левченко советует

Скопировано

🛠 Псевдоэлемент ::after можно использовать и для того, чтобы вывести важную информацию во время печати. Например, содержимое ссылок, которые есть на странице:

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

        
        
          
        
      

Тогда на печати мы получим следующее:

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

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

Скопировано

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

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

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

        
        
          
        
      

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

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

        
          
          <a href="#">  Условия использования</a>
          <a href="#">
  Условия использования
</a>

        
        
          
        
      
        
          
          /* Не делайте так ❌ */a::after {  content: "🔗" / "открыть в новом окне";}
          /* Не делайте так ❌ */
a::after {
  content: "🔗" / "открыть в новом окне";
}

        
        
          
        
      

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