Учимся использовать псевдоэлементы: after и: before в CSS

  1. Дальнейшее чтение на SmashingMag:
  2. Основной синтаксис
  3. Некоторые заметки о синтаксисе
  4. Характеристики вставленного контента
  5. После до чего?
  6. Вставка нетекстового содержимого
  7. Ужасная поддержка браузера
  8. Псевдоэлементы не являются критическими
  9. Пара напоминаний

Если вы следили за вкладками в различных блогах по веб-дизайну, вы, вероятно, заметили, что псевдоэлементам: before и: after уделялось довольно много внимания на этапе разработки интерфейса - и по уважительной причине , В частности, эксперименты одного блоггера, а именно лондонского разработчика Николаса Галлахера, дали в последнее время псевдоэлементам довольно мало информации. [Проверено ссылками февраль / 08/2017] «Элементы стиля»)] ( http://ww.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/ Чтобы дополнить эту экспозицию (и воспользоваться растущей тенденцией), я собрал то, что, как я надеюсь, является довольно всеобъемлющим сокращением псевдоэлементов. Эта статья предназначена прежде всего для тех из вас, кто видел некоторые из классные вещи сделано с псевдоэлементами, но вы хотите узнать, что это за техника CSS, прежде чем попробовать ее самостоятельно.

Если вы следили за вкладками в различных блогах по веб-дизайну, вы, вероятно, заметили, что псевдоэлементам: before и: after уделялось довольно много внимания на этапе разработки интерфейса - и на то есть веская причина. В частности, эксперименты одного блоггера, а именно лондонского разработчика Николас Галлахер - дали немного псевдоэлементов в последнее время.

Николас Галлахер использовал псевдоэлементы для создания 84 графических иконок, созданных из семантического HTML
Николас Галлахер использовал псевдоэлементы для создания 84 графических иконок, созданных из семантического HTML.

Чтобы дополнить эту экспозицию (и воспользоваться растущей тенденцией), я собрал то, что, как я надеюсь, является довольно всеобъемлющим сокращением псевдоэлементов. Эта статья предназначена прежде всего для тех из вас, кто видел некоторые из классные вещи сделано с псевдоэлементами, но вы хотите узнать, что это за техника CSS, прежде чем попробовать ее самостоятельно.

Хотя спецификация CSS содержит другие псевдоэлементы Я сосредоточусь на: до и: после. Итак, для краткости, я скажу «псевдоэлементы», чтобы обозначить в целом эти две особенности.

Дальнейшее чтение на SmashingMag:

Что делает псевдоэлемент?

Псевдоэлемент делает именно то, что подразумевает слово. Он создает телефонный элемент и вставляет его до или после содержимого целевого элемента.

Слово «псевдо» является транслитерация из Греческое слово это в основном означает «ложь, обман, ложь». Итак, называть их псевдоэлементами уместно, потому что они на самом деле ничего не меняют в документе. Скорее, они вставляют похожие на призрака элементы, которые видны пользователю и могут быть стилизованы в CSS.

Основной синтаксис

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

#example: before {content: "#"; } #example: after {content: "."; }

Об этом примере следует отметить две вещи. Сначала мы нацеливаемся на один и тот же элемент, используя #example: before и #example: after. Строго говоря, они являются псевдоэлементами в коде.

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

В этом примере элемент с примером id будет иметь хеш-символ, помещенный «перед» его содержимым, и точку (или полную остановку), помещенную «после» его содержимого.

Некоторые заметки о синтаксисе

Вы можете оставить свойство content пустым и просто обработать псевдоэлемент как поле без содержимого, например:

#example: before {content: ""; дисплей: блок; ширина: 100 пикселей; высота: 100 пикселей; }

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

Вы, возможно, заметили, что вы также можете кодировать псевдоэлементы, используя синтаксис с двоеточием (:: before и :: after), который я обсуждалось раньше , Краткое объяснение состоит в том, что нет никакой разницы между двумя синтаксисами; это просто способ отличить псевдоэлементы (двойное двоеточие) от псевдоклассов (одиночное двоеточие) в CSS3.

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

: before {content: "#"; }

Хотя вышесказанное действительно, но это бесполезно. Код вставит символ хеша перед содержимым каждого элемента в DOM. Даже если вы удалите тег <body> и все его содержимое, вы все равно увидите на странице два хеш-символа: один в элементе <html> и один в теге <body>, который автоматически создается браузером.

Характеристики вставленного контента

Как уже упоминалось, вставленный контент не виден в источнике страницы. Это видно только в CSS.

Кроме того, вставленный элемент по умолчанию встроенный элемент (или, в терминах HTML5, в категории семантики текстового уровня). Таким образом, чтобы дать вставленному элементу высоту, отступы, поля и т. Д., Вам обычно придется явно определять его как элемент уровня блока.

Это приводит к краткому описанию того, как стилизовать псевдоэлементы. Посмотрите на этот рисунок из моего текстового редактора:

В этом примере я выделил стили, которые будут применяться к элементам, вставленным до и после содержимого целевого элемента. Таким образом, псевдоэлементы несколько уникальны, потому что вы вставляете содержимое и стили в один и тот же блок объявления.

Также обратите внимание, что типичные правила наследования CSS применяются к вставленным элементам. Например, если к элементу <body> документа применяется стек шрифтов Helvetica, Arial, sans-serif, то псевдоэлемент наследует этот стек шрифтов так же, как и любой другой элемент.

Аналогично, псевдоэлементы не наследуют стили, которые не наследуются естественным образом от родительских элементов (таких как отступы и поля).

После до чего?

Ваша догадка при просмотре псевдоэлементов: before и: after может заключаться в том, что вставленный контент будет вставлен до и после целевого элемента. Но, как упоминалось выше, это не так.

Внедренный контент будет дочерним по отношению к целевому элементу, но он будет помещен «до» или «после» любого другого контента в этом элементе.

Чтобы продемонстрировать это, посмотрите на следующий код. Во-первых, HTML:

<p class = "box"> Другое содержимое. </ p>

И вот CSS, который вставляет псевдоэлемент:

p.box {width: 300px; рамка: сплошная 1px белая; отступы: 20 пикселей; } p.box:before {content: "#"; рамка: сплошная 1px белая; обивка: 2px; поле: 0 10px 0 0; }

В HTML все, что вы увидите, - это абзац с классом блока со словами «Другой контент» внутри (то же самое, что вы увидели бы, если бы просмотрели исходный код на активной странице). В CSS абзацу задается заданная ширина, а также отступы и видимая граница.

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

Вот результат просмотра в браузере:

Внешняя коробка - это абзац. Граница вокруг символа хеша обозначает границу псевдоэлемента. Таким образом, вместо вставки «перед» абзаца псевдоэлемент помещается перед «прочим содержимым» в абзаце.

Вставка нетекстового содержимого

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

Во-первых, вы можете включить URL-адрес, указывающий на изображение, так же, как если бы вы включили фоновое изображение в CSS:

p: before {content: url (image.jpg); }

Обратите внимание, что цитаты отсутствуют. Если вы поместите ссылку на URL в кавычки, она станет буквальной строкой и вставит текст «url (image.jpg)» в качестве содержимого вместо вставки самого изображения.

Естественно, вы могли бы включить URI данных вместо ссылки на изображение, как вы можете с фоном CSS.

У вас также есть возможность включить функцию в виде attr (X). Эта функция, согласно спецификации , «Возвращает в виде строки значение атрибута X для субъекта селектора».

Вот пример:

a: after {content: attr (href); }

Что делает функция attr ()? Он принимает значение указанного атрибута и помещает его как текстовое содержимое для вставки в качестве псевдоэлемента.

Приведенный выше код приведет к тому, что значение href каждого элемента <a> на странице будет размещено сразу после каждого соответствующего элемента <a>. Это может быть использовано в таблица стилей печати включить полные URL-адреса рядом со всеми ссылками при печати документа.

Вы также можете использовать эту функцию, чтобы получить значение атрибута title элемента, или даже микроданных ценности. Конечно, не все из этих примеров были бы практичны сами по себе; но в зависимости от ситуации конкретное значение атрибута может быть практичным в качестве псевдоэлемента.

Хотя возможность получить заголовок или альтернативный текст изображения и отобразить его на странице в качестве псевдоэлемента, было бы практично, это невозможно. Помните, что псевдоэлемент должен быть дочерним элементом элемента, к которому он применяется. Изображения, которые недействительным (или пустые) элементы, не имеют дочерних элементов, поэтому в этом случае это не сработает. То же самое относится и к другим пустым элементам, таким как <input>.

Ужасная поддержка браузера

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

Браузерная поддержка псевдоэлементов: before и: after складывается следующим образом:

  • Chrome 2+,
  • Firefox 3.5+ (3.0 имел частичную поддержку),
  • Safari 1.3+,
  • Опера 9.2+,
  • IE8 + (с некоторыми незначительными ошибками),
  • Практически все мобильные браузеры.

Единственная реальная проблема (не удивительно) - это IE6 и IE7, которые не поддерживают. Итак, если ваша аудитория находится в нише веб-разработки (или на другом рынке с низким числом IE), вы, вероятно, можете пойти дальше и свободно использовать псевдоэлементы.

Псевдоэлементы не являются критическими

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

Пара напоминаний

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

Еще одна вещь, которую нужно иметь в виду, это то, что инструменты разработчика, такие как Firebug не показывать контент, сгенерированный псевдоэлементами , Таким образом, при чрезмерном использовании псевдоэлементы могут стать причиной головной боли из-за ремонтопригодности и сделать процесс отладки намного более медленным.

Обновление. Как уже упоминалось в комментариях, вы можете использовать инструменты разработчика Chrome для просмотра стилей, связанных с псевдоэлементом, но этот элемент не будет отображаться в DOM. Также, Firebug добавляет поддержку псевдоэлементов в версии 1.8.

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

Похожие

Eggheads
Eggdrop - самый старый бот Internet Relay Chat (IRC), все еще находящийся в активной разработке. Первоначально создан Роби Пойнтер в декабре 1993 года для использования на канале под названием #gayteen он породил почти культ, подобный следующим пользователям. Это многофункциональная программа,
Как отправить контент в Kindle с компьютера, браузера и смартфона
Я большой поклонник Kindle, и, поскольку я не читаю только книги по нему, я тщательно выбрал набор дополнительных приложений и расширений для браузера. Благодаря им и сервису Whispersync я отправляю любой контент читателю и синхронизирую его со своим смартфоном. В посте вы найдете ответы на то, какие дополнения к Kindle использовать, используя Windows, браузер Chrome и смартфон Android. Kindle, на мой взгляд, лучший читатель электронных
В поисках лучшей капчи
... дований может показаться очевидным, что CAPTCHA далеко не идеальны в качестве решения. Удалите спамеров из уравнения, и мы полностью удалим необходимость в CAPTCHA; это менталитет, к которому мы должны стремиться. Идеальная капча вовсе не капча. Существуют CAPTCHA, или Полностью автоматизированные публичные тесты Тьюринга, которые отличают компьютеры и людей, чтобы гарантировать, что пользовательский ввод не был сгенерирован компьютером. Эти своеобразные загадки обычно используются в
Если ваш компьютер заражен вредоносным ПО, запуск антивируса в Windows может оказаться недостаточным для его уда...
Если ваш компьютер заражен вредоносным ПО, запуск антивируса в Windows может оказаться недостаточным для его удаления. Если на вашем компьютере есть руткит, вредоносная программа может скрыться от вашего антивирусного программного
Врачи заставили ее рожать, хотя она не могла выжить
... чего не ел, я ничего не пил с севера. 14.00 У меня все еще не было капельницы, и никто не сказал мне, что никто все равно ничего не сделает, поэтому я бы что-нибудь выпил или съел. Беременная женщина была без еды и питья в течение дня ... доля
7 быстрых и простых переводчиков для Firefox
Реклама Что вы делаете, когда сталкиваетесь с сайтом, на котором нет версия на вашем языке 2 замечательных виджета для перевода вашего сайта на более чем 20 языков
Как использовать избранные изображения в WordPress
Из коробки WordPress включает отличную функцию для стандартизированного использования изображений на вашем сайте. Эта опция для избранных изображений упрощает обработку изображений и позволяет WordPress автоматически создавать миниатюры для использования в различных местах на вашем веб-сайте WordPress. Темы WordPress от MH Themes Используйте избранные изображения для автоматического отображения миниатюр внутри сообщений, в архивах и в
Основанные на изображениях опросы, формы и опросы
... добавить один в самое начало ваших опросов? Это позволяет вам передавать ваши наиболее важные сообщения в самом начале и привлечь внимание вашего респондента. Так намного лучше, с силой изображения
Обзор Sony Xperia L
Sony Xperia L - это еще один Xperia с фетишем к буквам алфавита от фабрики Sony различных моделей смартфонов с целью охвата практически всех сегментов рынка. Xperia L довольно хорошо реагирует на атаки конкурентов в среднем сегменте и по доступной цене предлагает
Получите больше от Windows 7 Переключение приложений ALT + TAB: хитрости, о которых вы не знали
Реклама Alt + Tab - это больше, чем просто нажатие Alt + Tab для переключения между окнами. Существуют различные скрытые сочетания клавиш, которые делают переключатель Alt + Tab более быстрым и простым в использовании. Есть также способы настроить переключатель
Остановка спам-ботов с двумя простыми альтернативами капчи
Статья впервые опубликована в ноябре 2012 года, обновлена ​​в апреле 2019 года Когда этот пост был написан в 2012 году, это было более простое время для Интернета. Сегодня спам-боты более агрессивны и умнее, чем когда-либо. Они бывают разных форм; иногда они добавляют явно поддельные адреса, которые быстро отскакивают, а иногда они добавляют адреса реальных людей как своего рода преследование. Если вы оставите свой список «открытым», скорее всего, боты будут

Комментарии

Возможно, что еще более важно, существует ли пригодная для использования капча, которая не может быть взломана?
Возможно, что еще более важно, существует ли пригодная для использования капча, которая не может быть взломана? Если ответ «нет», каково реальное решение для онлайн-спама? Мир капчей Человеческий мозг - удивительная работа. Его способность осмыслять, находить порядок в хаосе и приспосабливаться к чрезвычайным обстоятельствам делает его очень полезным, если не сказать больше. Для некоторых задач он с легкостью затмевает компьютер. В других задачах - например, в математике -
Чего не хватает в Windows 8?
Чего не хватает в Windows 8? Чего не хватает в Windows 8? В Windows 8 были удалены многие функции, которые были ключевыми для Windows на протяжении многих лет, включая кнопку «Пуск», меню «Пуск» и Windows Aero. Мы стремимся сосредоточиться на новых возможностях ... Прочитайте больше , Для получения дополнительной информации об освоении Windows
Почему Данверс не стареет?
Почему Данверс не стареет? Эта хронология приводит к выводу, что старение Данверс значительно замедлилось и / или что она омолодилась. Ее старение, вероятно, начинает замедляться в 1958 году. Таким образом, в 1977 году она выглядит примерно в 28 или 30 лет, тогда как по нашему графику ей должно быть 40 лет. В 2007 году она не может выглядеть на день старше 32, тогда как по нашему графику ей было бы почти 70 лет. , Фактор снижения возраста никогда не упоминается в первоисточниках.
Вы хотите запустить Linux, но не хотите устанавливать его и разделять отдельные разделы на диске?
Вы хотите запустить Linux, но не хотите устанавливать его и разделять отдельные разделы на диске? Вы можете создать виртуальную машину ... и если вы не знаете, как это сделать, у нас есть хорошая новость - можно загрузить готовые виртуальные машины с различными дистрибутивами Linux, которые можно запустить на компьютере.
Или это не определено?
Или это не определено? Поскольку методы кодирования JavaScript и шаблоны проектирования с годами становятся все более изощренными, наблюдается соответствующее увеличение числа областей самореференции в обратных вызовах и замыканиях, которые являются довольно распространенным источником «этой / этой путаницы». Рассмотрим этот пример кода: Game.prototype.restart = function () {this.clearLocalStorage (); this.timer = setTimeout (function () {this.clearBoard
Прочитайте больше Но что может быть быстрее для перевода, чем для браузера?
Или это не определено? Поскольку методы кодирования JavaScript и шаблоны проектирования с годами становятся все более изощренными, наблюдается соответствующее увеличение числа областей самореференции в обратных вызовах и замыканиях, которые являются довольно распространенным источником «этой / этой путаницы». Рассмотрим этот пример кода: Game.prototype.restart = function () {this.clearLocalStorage (); this.timer = setTimeout (function () {this.clearBoard
Как команды могут создавать и использовать Mind Maps вместе?
Как команды могут создавать и использовать Mind Maps вместе? На этом семинаре вы узнаете основную идею Mind Mapping с помощью множества упражнений и примеров. Вы разрабатываете карты разума на бумаге, а также узнаете бесплатное программное обеспечение для цифровых карт разума. Если вы хотите ознакомиться с MindManager, мы рекомендуем наши Семинар MindManager , содержание семинара Введение в метод
У наших матерей и бабушек, однако, были свои способы решения этой проблемы, так почему мы не должны быть в состоянии это сделать?
У наших матерей и бабушек, однако, были свои способы решения этой проблемы, так почему мы не должны быть в состоянии это сделать? Вот 10 интересных идей для умного хранения в небольших комнатах и ​​квартирах - благодаря им вы обнаружите, что ваша квартира намного вместительнее, чем вы думали!
Какой веб-браузер вы предпочитаете использовать на iOS, а какой вам нравится меньше всего?
Какой веб-браузер вы предпочитаете использовать на iOS, а какой вам нравится меньше всего? Есть что еще сказать об этой истории? Поделитесь своими комментариями ниже! О Кирке МакЭлхирне Кирк МакЭлхирн пишет в своем блоге о Mac, iPod, iTunes, книгах, музыке и многом другом Kirkville , Он является соведущим
Что может использовать REST API?
Что может использовать REST API? REST API позволяет вам взаимодействовать с Parse из всего, что может отправить HTTP-запрос. Увидеть Parse REST Definition для примеров этого. API REST в реальном мире Добро пожаловать большие мальчики. Что подразумевается под термином «RESTful API»? Соответствие ограничениям REST обычно называется «RESTful» API можно считать «RESTful»,
Однако вкусы не обсуждаются - верно?
Однако вкусы не обсуждаются - верно? ;) Samsung Gear S2 Classic - 90sekund.pl С точки зрения высокой элегантности ему все еще немного не хватает. Жаль, что Samsung вместо двух разных версий часов не выбрала один тип конверта со сменными полосами. Конечно, как часть версии можно заменить, но ремень от Gear S2 Classic не впишется

После до чего?
Добавить один в самое начало ваших опросов?
Возможно, что еще более важно, существует ли пригодная для использования капча, которая не может быть взломана?
Если ответ «нет», каково реальное решение для онлайн-спама?
Чего не хватает в Windows 8?
Чего не хватает в Windows 8?
Почему Данверс не стареет?
Вы хотите запустить Linux, но не хотите устанавливать его и разделять отдельные разделы на диске?
Вы хотите запустить Linux, но не хотите устанавливать его и разделять отдельные разделы на диске?
Или это не определено?

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

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: