Categories: Для интернета

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

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

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

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

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

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

5.Так же мы можем задать для нашего псевдоэлемента следующие CSS свойства:

height:20px; /*высота псевдоэлемента*/

color:#fff; /*цвет текста*/

background:#2F73B6; /*цвет фона псевдоэлемента*/

border:1px solid #000; /*рамка*/

font—size:16px; /*размер шрифта*/

padding:10px; /*внутренний отступ псевдоэлемента*/

display:block;/*превращаем в блочный элемент*/

text—align:left;/*выравнивание текста*/ и другие CSS свойства.

width:100%; /*ширина псевдоэлемента*/

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

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

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

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

1.Подготавливаем изображение нужного размера и загружаем его на хостинг в папку с картинками вашего шаблона.

Я для этой цели использую FTP клиент FileZilla. Как с ним работать я рассказывала в этой статье.

2.Теперь в самом конце CSS файла пишем код:

#content::after {

content:»;

display: block; /*делаем элемент блочный*/

height:100px; /*задаём высоту*/

background: url(images/bottom—image1.png) no—repeat; /*указываем загруженную картинку в качестве фона псевдоэлемента*/

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

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

1.Псевдоэлементы должны указываться сразу после селлектора через двойное двоеточие без пробела, как показано в примерах выше. Однако допускается и использование одинарного двоеточия.

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