Использование псевдо-классы :before и :After в CSS

Опубликованно 20.09.2018 03:04

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

Элементы :before и :After в CSS-это так называемые псевдо-элементы и используется для оформления указанной части контейнера. Например, он может быть использован для стилизации первой буквы в строке или вставить содержимое до или после того, как содержимое контейнера. Они используются, чтобы что-то добавить перед или после содержимого элемента. Псевдо-элементы :before и :after имеют множество применений, но они служат той же цели.

Они используются для дизайна существующего HTML-элементы с дополнительным текстом или содержимого изображения. Псевдоэлементы :After и “содержание” в CSS, который является его собственностью, неразрывно связаны между собой, и первый не работает отдельно от второго. Содержание этого свойства может быть оставлено пустым, если вы добавите пустые кавычки: содержимое: “”. Таким образом, другой вариант использования это псевдо-элемент, чтобы сделать его в контейнер для контента. Если содержание и свойство удаляется :после не будет работать. Практическое применение :before и :After в CSS

Наверное, самое популярное использование эти псевдо-элементы — добавление значков. В этом случае они будут располагаться до или после какой-либо текст, например, название компании. Другой вариант применения — заголовки укладки. Но псевдо-элементы могут быть использованы не только для создания разнообразных украшений на странице. Рассмотрим самый распространенный пример: Красная звезда, которая находится в поле формы обязательным. Один из самых простых способов сделать это, чтобы поместить его непосредственно в HTML-разметке. Но я должен написать большое разметки на одной из красных звезд. Кроме того, что если мы хотим изменить все эти звездочки в точку или слово или перекрашивать их в другой цвет? В этом случае вам придется внести такие же изменения в каждом из дублей.

Пример форма

Несколько более элегантный способ, чтобы получить тот же результат-использовать псевдо-элемент :после того, как в CSS и объединить его с HTML-разметкой. Вам нужно установить в код пункт поле класса, а затем добавить к нему псевдо-элемент и нужное свойство:

.некоторые поля:после {содержание: "*";цвет: красный;}

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

Вставка содержимого без изменения файлов шаблона для сайта WordPress

Для WordPress сайтов, вы также можете использовать псевдо-элементы. Например, если вы хотите, чтобы добавить уведомления о доставке в заголовке на каждой странице, но установленная тема не позволяет ничего добавить, кроме строки поиска и корзины. Это гораздо легче, чем переделывать шаблон. Добавление псевдо-элемент :After и нужные метки в собственность “содержание” может быть размещен на подходящее место, где он будет выглядеть логично. Главный вывод из этого заключается в том, что с помощью :before и :after настолько широко, что позволяет позиционировать элементы, заставляя их быть правой или левой части контейнера, использовать внешние и внутренние поля.

Непрозрачный текст на полупрозрачном фоне

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

Использование комбинаций из нескольких таких элементов является мощным инструментом в руках разработчика, но считается, что лучше использовать в качестве последнего средства, когда PHP-код сайта по каким-то причинам недоступен, или невозможно исправить. Происходит потому, что других средств все можно сделать гораздо проще. Например, вы можете просто добавить простой CSS-классы, где это необходимо. Стоит отметить, что ошибка “подключение не удалось после 4 попыток УСБ” не относится к каскадных таблицах стилей. Это происходит, когда проблемы с сервером в игре Контр-Страйк: источник. То же самое относится к “подключение в CSS v34 не удалось после 4 попыток”. Здесь, под “УСБ” обозначает название игры.

Конкретные недостатки таких псевдо-элементы, такие как :после того, как в CSS включить: Хрупкость стилей. Способность быстро испортить ваш код, если не обрабатываются должным образом. Светонепроницаемость. Большой объем кода, используя псевдо-элементы могут быть непонятными для другой кодер, который будет работать с сайтом. Псевдо-элементы не полностью поддерживается. Браузеры становятся все лучше и лучше, но все равно намного безопаснее использовать простой HTML классе.

В основном это касается проектов, где PHP-код находится вне пределов досягаемости, и где-то это должно быстро работать. Автор: Мария Штернберг 18 сентября, 2018

Категория: Строительство