Применение псевдоклассов :before и :after в CSS
Использование псевдоэлементов в CSS значительно расширяет возможности для интеллектуального выбора конкретных элементов на веб-странице и для внесения таких видов изменений, которые в противном случае были бы невозможны. Применение их сочетаний позволяет внести довольно сложные изменения в код страницы. С их помощью можно решать множество проблем, для которых обычно нужны либо JavaScript, либо доступ к PHP-коду сайта.
Псевдоэлементы для стилизации в CSS
Элементы :before и :after в CSS относятся к так называемым псевдоэлементам и используются для стилизации указанных частей контейнера. Например, его можно использовать для задания стиля первой букве в строке или вставки контента до или после содержимого какого-то определенного контейнера. Они используются для добавления чего-либо до или после содержимого элемента. Псевдоэлементы :before и :after имеют множество применений, но они служат единой цели.
Их используют для оформления существующих HTML-элементов с дополнительным текстом или изображением содержимого. Псевдоэлементы :after и “content” в CSS, который является его свойством, неразрывно связаны, и первый не работает отдельно от второго. Содержание этого свойства можно оставить пустым, если добавить к нему пустые кавычки: content: “”. Таким образом, еще один вариант использования этого псевдоэлемента — сделать его контейнером для какого-то содержимого. Если содержимое и свойство удаляется полностью, :after не будет работать.
Практическое применение :before и :after в CSS
Наверное, самое популярное использование данных псевдоэлементов — добавление иконок. В этом случае они будут располагаться до или после какого-то текста, например, названия компании. Еще один вариант применения — стилизация заголовков. Но псевдоэлементы можно использовать не только для создания разнообразных украшений на странице. Рассмотрим очень распространенный пример: красную звездочку, которая находится в поле формы, обязательном для заполнения. Один из простых способов это сделать — размещать ее каждый раз непосредственно в HTML-разметке. Но ради этого придется писать очень много разметки для одной красной звездочки. Кроме того, что если мы хотим изменить все эти звездочки в точки или в слова или перекрасить их в другой цвет? В этом случае придется сделать одно и то же изменение в каждом из дубликатов.
Пример работы с формой
Несколько более элегантный способ, чтобы получить тот же результат — использовать псевдоэлемент :after в CSS и объединить его с разметкой HTML. Для этого нужно задать в коде элементу поля какой-то класс, а затем добавить к нему псевдоэлемент и нужное свойство:
.some-field:after {content: " *";color: red;}
Теперь в нужных местах будет стоять красная звездочка. Кроме того, правила для элементов с классом .some-field и псевдоэлементом :after в CSS будут централизованы в одном месте, так что можно будет легко изменить внешний вид страницы, в том числе цвет, размер, содержимое на всем сайте сразу. Из этого примера становится понятно, что подобная логика применяется к другим повторяющимся текстовым украшениям. Например, используя псевдоэлемент :before вместе с некоторыми шрифтами, можно изменять значок неупорядоченного списка на другой.
Вставка содержимого без изменения файлов шаблонов для сайта WordPress
Для сайтов WordPress также можно использовать псевдоэлементы. Например, если нужно добавить уведомление о доставке в заголовке на каждой странице, но установленная тема не позволяет что-то добавить, кроме строки поиска и корзины. Это гораздо проще, чем переделывать шаблон. Добавив псевдоэлемент :after и нужную надпись в свойство “content”, можно расположить ее на удобном месте, где она будет смотреться логично. Главным выводом из этого является то, что использование :before и :after настолько широко, что позволяет по-разному позиционировать элементы, заставляя их находиться справа или слева от контейнера, использовать поля и отступы.
Непрозрачный текст на полупрозрачном фоне
В CSS удивительно сложно сделать элемент с полностью непрозрачным текстом над полупрозрачным изображением. Можно пробовать выставлять непрозрачность, но при этом и сам текст размывается. Самый простой вариант сделать это — правильно использовать псевдоэлемент :before. С его помощью основной слой становится полноразмерным, абсолютно спозиционированный и с полупрозрачным изображением под главным элементом, в котором содержится текст. Этот слой изображения может иметь любую непрозрачность, которая необходима, но при этом не будет влиять на основной слой.
Недостатки использования псевдоклассов
Использование сочетаний нескольких таких элементов является мощным инструментом в руках разработчика, но считается, что его лучше всего применять в качестве последнего средства, когда PHP-код сайта по каким-то причинам не доступен, или его невозможно исправить. Происходит так потому, что с помощью других средств все может быть сделано гораздо проще. Например, можно просто добавить простые классы CSS, где это необходимо. Стоит отметить, что ошибка “connection failed after 4 retries CSS” не относится к каскадной таблице стилей. Она встречается при проблеме с сервером в игре Counter-Strike: Source. То же самое относится к “CSS v34 connection failed after 4 retries”. Здесь под “CSS” имеется в виду название игры.
Конкретные недостатки таких псевдоэлементов как :after в CSS включают:
- Хрупкость стилевого оформления. Возможность быстро испортить код при неверном использовании.
- Непрозрачность. Большое количество кода с использованием псевдоэлементов может быть непонятным другому верстальщику, который начнет работать с сайтом.
- Псевдоэлементы поддерживаются не полностью. Браузеры становятся все лучше и совершеннее, но все же намного безопаснее пользоваться простыми классами HTML.
В основном это касается проектов, где PHP-код находится вне досягаемости, и где что-то должно быстро работать.