Псевдоэлементы - это один из наиболее продвинутых селекторов, доступных для использования в CSS. Основная цель этих селекторов - создать уникальный стиль без изменения HTML-документа, который используется для создания базовой структуры данной веб-страницы.

Вот как использовать псевдоэлементы в CSS.

Общие псевдоэлементы

Существует обширный список псевдоэлементов, которые могут облегчить жизнь веб-разработчика. Некоторые из этих псевдоэлементов включают:

• До
• После
• Фон
• Первая строка
• Первое письмо

В определенных ситуациях некоторые псевдоэлементы могут оказаться более подходящими, чем другие, но единственное, что остается неизменным, - это общая структура для использования любого псевдоэлемента.

Пример структуры псевдоэлементов

selector:: псевдоэлемент {
/ * код css * /
} 

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

Псевдоэлементы до и после являются наиболее популярными в списке, и, учитывая, что существует множество практических способов их использования, нетрудно понять, почему.

Использование псевдоэлемента Before в CSS

Хотя это не невозможно, в CSS сложно наложить на изображения читаемый текст. В основном это связано с тем, что изображение и текст занимают одну и ту же позицию на веб-странице.

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

Единственная проблема заключается в том, что, поскольку изображение и текст занимают одинаковую позицию, текст также станет несколько прозрачным.

Один из немногих эффективных способов решения этой проблемы - использование псевдоэлемента before.

Использование примера псевдоэлемента Before

.landingPage {
/ * Располагает текст на накладываемом изображении * /
дисплей: гибкий;
flex-direction: столбец;
justify-content: center;
align-items: center;
выравнивание текста: центр;
/ * настраивает страницу под разные размеры экрана * /
высота: 100vh;
}
.landingPage:: before {
содержание:'';
/ * импортирует изображение * /
фон: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
неповторяющийся центр / крышка;
/ * накладывает оверлей поверх изображения * /
непрозрачность: 0,4;
/ * делает изображение видимым * /
позиция: абсолютная;
верх: 0;
слева: 0;
ширина: 100%;
высота: 100%;
}

Приведенный выше код создан для использования вместе с классом HTML landingPage ниже. Как показано в приведенном выше коде, с помощью псевдоэлемента before мы можем нацелить изображение и использовать на нем свойство непрозрачности до того, как изображение будет объединено с текстом.

Использование псевдоэлемента Before


Это результат использования псевдоэлемента before
для наложения и изображения с читаемым текстом.

Это приведет к наложению оверлея на изображение и отображению чистого текста сверху, как показано на изображении ниже:

Использование псевдоэлемента After в CSS

На практике псевдоэлемент after используется для создания HTML-формы. Большинство форм создаются с набором полей, которые требуют данных для успешной отправки формы.

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

Использование примера псевдоэлемента After

.required:: after {
содержание: '*';
красный цвет;
} 

Вставка приведенного выше кода в раздел CSS вашей формы гарантирует, что каждая метка, содержащая требуемый класс, будет сопровождаться красной звездочкой. Псевдоэлемент after также применим в этом примере, поскольку он помогает отделить стиль от структуры (что всегда идеально при разработке программного обеспечения).

Свойство Content

Как показано в приведенном выше примере псевдоэлемента after, свойство content - это инструмент, который используется для вставки нового содержимого на веб-страницу. Это свойство используется только с псевдоэлементами до и после.

Важно отметить, что даже если нет содержимого, доступного для подачи в свойство содержимого (например, в примере с псевдоэлементом before выше), вам по-прежнему необходимо использовать свойство content в параметрах псевдоэлемента до или после, чтобы заставить их работать как предназначена.

Теперь вы можете использовать псевдоэлементы в CSS.

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

10 простых примеров кода CSS, которые вы можете изучить за 10 минут

Хотите узнать больше об использовании CSS? Для начала попробуйте эти базовые примеры кода CSS, а затем примените их к своим собственным веб-страницам.

Читать далее

Об авторе