28.03.2024

Как работать c before и after в CSS?

Как работать с псевдоэлементом before в CSS?

Before позволяет нам добавить свой блок перед любым элементом на вашем сайте. Для того чтобы это сделать нам нужно:

  1. 1.Определяем класс или идентификатор элемента, перед которым мы хотим добавить свой блок. Как это делать показано в этой статье.
  2. 2.Подключаемся к сайту через FTP или заходим в файловый менеджер на хостинге.
  3. 3.Открываем CSS файл, в котором прописаны стили сайта. Для сайтов на CMS этот файл находится в папке с активным шаблоном и может называться style.css, stylesheet.css, main.css в зависимости от CMS.
  4. 4.В самом конце этого файла пишем код:
  5. 5.Так же мы можем задать для нашего псевдоэлемента следующие CSS свойства:
  6. 6.Сохраняем изменения в файле и смотрим что получилось.
    CSS псевдоэлементы
Обратите внимание, как отображается наш псевдоэлемент before в HTML коде. Он не является самостоятельным тегом и привязан к элементу класс которого мы указали в CSS файле.

Как работать с псевдоэлементом after в CSS?

Псевдоэлемент after позволяет добавить произвольный контент в конце указанного элемента.
Алгоритм работы с ним абсолютно такой же как и с before. Разница заключается лишь в том, что он будет добавлять блок не перед, а в конце элемента класс или идентификатор которого вы укажете в CSS файле.
Например, добавим изображение после блока с идентификатором #content
Полноценную картинку через тег <img> мы таким образом не вставим, поэтому будем задавать её через фон.

  1. 1.Подготавливаем изображение нужного размера и загружаем его на хостинг в папку с картинками вашего шаблона.
    Загрузка изображения на хостинг
    Я для этой цели использую FTP клиент FileZilla. Как с ним работать я рассказывала в этой статье.
  2. 2.Теперь в самом конце CSS файла пишем код:

В результате в конце указанного блока у нас добавится новый блок с изображением.

Вывод блока псевдоэлементом

Особенности псевдоэлементов before и after

  1. 1.Псевдоэлементы должны указываться сразу после селлектора через двойное двоеточие без пробела, как показано в примерах выше. Однако допускается и использование одинарного двоеточия.
  2. 2.Псевдоэлемет является строчным элементом, поэтому если в CSS свойстве content ничего не указано то его ширина по умолчанию будет равна нулю. Так же для строчных элементов не применяется вертикальные отступы margin. Чтобы они начали работать и элемент стал на всю ширину ему нужно дописать CSS свойство display:block;
  3. 3.Вы можете использовать только один псевдоэлемент на селлектор. То есть нельзя использовать сразу 2 псевдоэлемента для одного блока.
    Запись .block-class::before::after или #content::first-line::after будет неправильной.
  4. 4.Кроме псевдоэлементов ::before и ::after существуют и другие, такие как ::selection, ::first-line, ::first-letter, о которых я расскажу в одной из следующих статей.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *