Как работать 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.В самом конце этого файла пишем код:
   <br<br /><br /> <br.entry-meta::before { content:’Привет!’;<br}<br<br /><br />

   .entry—meta::before { content:‘Привет!’;

   Вместо .entry-meta указываете класс или идентификатор своего элемента.
   Внутри css свойства content в кавычках вы можете указать свой текст или какой-то символ.

5. 5.Так же мы можем задать для нашего псевдоэлемента следующие CSS свойства:
   <br<br /><br /> <brheight:20px; /*высота псевдоэлемента*/<brcolor:#fff; /*цвет текста*/<brbackground:#2F73B6; /*цвет фона псевдоэлемента*/<brborder:1px solid #000; /*рамка*/<brfont-size:16px; /*размер шрифта*/<brpadding:10px; /*внутренний отступ псевдоэлемента*/<brdisplay:block;/*превращаем в блочный элемент*/<brtext-align:left;/*выравнивание текста*/ и другие CSS свойства.<brwidth:100%; /*ширина псевдоэлемента*/<br<br /><br />

   height:20px; /*высота псевдоэлемента*/ color:#fff; /*цвет текста*/ background:#2F73B6; /*цвет фона псевдоэлемента*/ border:1px solid #000; /*рамка*/ font—size:16px; /*размер шрифта*/ padding:10px; /*внутренний отступ псевдоэлемента*/ display:block;/*превращаем в блочный элемент*/ text—align:left;/*выравнивание текста*/ и другие CSS свойства. width:100%; /*ширина псевдоэлемента*/

   
6. 6.Сохраняем изменения в файле и смотрим что получилось.
   

Обратите внимание, как отображается наш псевдоэлемент before в HTML коде. Он не является самостоятельным тегом и привязан к элементу класс которого мы указали в CSS файле.

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

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

1. 1.Подготавливаем изображение нужного размера и загружаем его на хостинг в папку с картинками вашего шаблона.
   
   Я для этой цели использую FTP клиент FileZilla. Как с ним работать я рассказывала в этой статье.
2. 2.Теперь в самом конце CSS файла пишем код:
   <br<br /><br /> <br#content::after { content:»; display: block; /*делаем элемент блочный*/ height:100px; /*задаём высоту*/ background: url(images/bottom-image1_ls.jpg) no-repeat; /*указываем загруженную картинку в качестве фона псевдоэлемента*/<br}<br<br /><br />

   #content::after { content:»; display: block; /*делаем элемент блочный*/ height:100px; /*задаём высоту*/ background: url(images/bottom—image1.png) no—repeat; /*указываем загруженную картинку в качестве фона псевдоэлемента*/

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

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

1. 1.Псевдоэлементы должны указываться сразу после селлектора через двойное двоеточие без пробела, как показано в примерах выше. Однако допускается и использование одинарного двоеточия.
   <br<br /><br /> <br.block-class:before<br<br /><br />

   .block—class:before

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, о которых я расскажу в одной из следующих статей.