5 приемов CSS3 с псевдоэлементами before и after


Оглавление (нажмите, чтобы открыть):

Hello-site.ru

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

В этой заметке хочу обратить ваше внимание на псевдоэлементы before и after в CSS и рассказать преимущества их использования. Их не прописывают в html, и их не видно в коде, поэтому они называются псевдоэлементами. Несмотря на это, они могут быть в качестве строчных и блочных элементов, к ним могут применяться любые css-стили.

Часто в верстке приходится оборачивать элемент в тег, чтобы применить к нему какое-нидуь оформление. Псевдоэлементы :before, :after позволят прикрепить к элементу такие же элементы до и после, не прибегая к добавлению тегов в html. Достаточно прописать в стилях следующее: div:before. Следует отметить, что использовать «content:»» обязательно.

Обычно псевдоэлементы удобно использовать для обрамления текста с обоих сторон, например, знаки кавычек при цитировании:

Или добавление маркера перед текстом:

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

Замечание, которое недавно было обнаружено: не применяется к тегам input.

Вы можете посмотреть примеры использования псевдоэлементов :before, :after в демо-примере:

CSS псевдоэлементы :before и :after, изучение и применение

Также существуют и другие псевдоэлементы, но сегодня мы сфокусируемся на :before и :after. По ходу статьи, под термином псевдоэлементы, будем подразумевать эти двое (before и after).

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

Псэвдоэлементы создают поддельные элементы и вставляют из перед (before) или после (after) определенного контента.

Сама приставка «псевдо-» говорит о том, что это не реальные элементы. Они не видимы для поисковых систем, используются только для оформления контента. Эти элементы определяются в CSS коде.

Базовый синтаксис

Псэвдоелементы :before и :after предельно просто прописываются в коде. Вот простой пример использования:

Здесь важно отметить две вещи. Во первых, мы указываем на реальный html элемент с помощью строк #example:before и #example:after. Приставки после двоеточия, означают, что это стиль не просто элемента, а его псевдоэлементов.

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

Расширенный синтаксис

Вы можете оставить свойство content пустым, и создать блок.

Если вы удалите свойство content, псевдоэлемент работать не будет. По крайней мере, это совойство должно оставаться пустым.

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

Еще один момент использования. Вы можете применить псевдоэлемент к каждому из html элементов.

Но это используется в личных целях. Этот код вставляет # перед контентом в каждом DOM элементе. Даже если вы удалите все теги на странице, вы сможете видеть два символа ## на странице. Это используется, сам не знаю для чего, но такое есть.

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

Как упоминалось раньше, контент, который вставляется невидим на html странице. Он видим только в CSS.

Также, вставляемый контент, по умолчанию будет строчным элементом. Чтобы сделать его блочным достаточно указать display:block;, указать ширину и высоту блока. Это очень удобно при создании вкладок, кнопок и т.д.

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


Вставляем не только текстовый контент

В свойстве content, не обязательно должен быть текст, также может быть картинка. Вы можете прописать URL картинки, как это делается в background.

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

Какие браузеры поддерживают :before и :after?

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

Firefox 3.5+ (3.0 имеет частичную поддержку),

IE8+ (С небольшими багами),

А также много других мобильных браузеров.

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

Как видите использование псевдоэлементов before и after не так критично, как многие возомнили. На этом все, желаю творческих успехов!

5 приемов CSS3 с псевдоэлементами ::before и ::after

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

Что такое псевдо-элемент и чем он отличается от псевдо-класса? Почему псевдо-элементы иногда имеют одно двоеточие, а иногда и два? Как :before и :after реализован в CSS? Какие приемы используют разработчики во всем мире для создания удивительных вещей при помощи CSS? Читайте дальше, чтобы узнать это.

Псевдо-классы vs. Псевдо-элементы

Очень многие люди путают эти понятия или не понимают в чем разница (включая и меня, прежде чем погрузиться в это исследование). Если вы воспользуетесь поиском, чтобы найти различия между ними, то вы найдете длинные и слишком «технические» ответы, перемешанные с простыми, голословными заявлениями о том, что это различные вещи по сути, но без обсуждения, как и почему. Некоторые источники, такие как W3Schools, похоже, используют эти термины как взаимозаменяемые, что часто приводит к их неправильному использованию. Ответ же на этот вопрос довольно прост.

Псевдо-классы: относятся ко всему элементу

Во-первых, давайте посмотрим на псевдо-классы, которые нацелены на весь элемент или его состояние.

Как вы можете видеть, что эти условия не обязательно основаны на DOM, в результате выбирается весь элемент в каждом случае. Что в конечном итоге определяет стили для всей ссылки, параграфа, div-а и т.д.

Псевдо-элементы: целевой элемент — часть целого.

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

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

Мастер Йода рекомендует:  Nice

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

:before vs. ::before

Перед тем, как перейти непосредственно к объяснению :before и :after, и как их можно использовать для выполнения некоторых интересных задач, давайте проясним еще один важный момент, который часто вызывает вопросы. Если вы посмотрите в Интернете примеры с :before и :after, то вы найдете использование двух разных вариантов.

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

/*CSS3*/
.example : :before < >
.example : :after < >
.example :first-child

Как вы можете видеть, в CSS2, мы использовали одно двоеточие для определения псевдо-классов и псевдо-элементов. Однако, чтобы помочь различать их, в CSS3 добавлено второе двоеточие только для псевдо-элементов.

Проблемы с IE, опять.


Так почему же мы все еще видим оба синтаксиса в современных примерах и учебниках? Остаются ли некоторые разработчики просто в неведении относительно этого изменения? Это может и так, но, вероятно, ответственность за большинство из этих противоречий лежит на нашем старом друге — Internet Explorer-е, разрушителе всего нового и хорошего в мире веб-разработки.

Оказывается, что все современные браузеры понимают синтаксис двойного двоеточия, но, к сожалению, с IE8 это не так. По этой причине, при кодировании с ::before и ::after, большинство разработчиков предпочитают для совместимости просто использовать синтаксис CSS2 с одним двоеточием. Чтобы не усложнять объяснение мы будем придерживаться этого синтаксиса в остальной части этой статьи.

Что такое :before и :after?

Это всё была теория, но это необходимо знать, если вы собираетесь участвовать в обсуждении вопросов использования :before и :after в CSS. Теперь мы можем, наконец, посмотреть как эти вещи работают.

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

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

Этот код будет вставлять маленький значок перед каждым элементом с классом .phoneNumber. :after работает точно так же, только, как вы можете догадаться, он будет добавлять значок после номера телефона.

Небольшой пример

Одной из причин по которой :before и :after стали невероятно популярны в последнее время, является их способность значительно увеличить сложность CSS элементов. Без дополнительной разметки, мы можем использовать эти псевдо-элементы для добавления дополнительных элементов и слоев.

Чтобы увидеть, как это работает, давайте создадим простую кнопку. Тут простые стили для класса button, которые создают круг с красным градиентом.:

.button <
height : 100px ;
width : 100px ;
position : relative ;
margin : 50px ;
color : white ;
text-align : center ;
line-height : 100px ;

/*закругленные углы и тень*/
-webkit-border-radius : 100px ;
-moz-border-radius : 100px ;
border-radius : 100px ;
-webkit-box-shadow : 2px 2px 4px rgba ( 0 , 0 , 0 , 0.4 ) ;
-moz-box-shadow : 2px 2px 4px rgba ( 0 , 0 , 0 , 0.4 ) ;
box-shadow : 2px 2px 4px rgba ( 0 , 0 , 0 , 0.4 ) ;

/*градиент*/
background : #e51d16 ; /* для старых браузеров */
background : -moz-linear-gradient ( top , #e51d16 0% , #b21203 100% ) ; /* для FF3.6+ */
background : -webkit-gradient ( linear , left top , left bottom , color-stop ( 0% , #e51d16 ) , color-stop ( 100% , #b21203 ) ) ; /* для Chrome,Safari4+ */
background : -webkit-linear-gradient ( top , #e51d16 0% , #b21203 100% ) ; /* для Chrome10+,Safari5.1+ */
background : -o-linear-gradient ( top , #e51d16 0% , #b21203 100% ) ; /* для Opera 11.10+ */
background : -ms-linear-gradient ( top , #e51d16 0% , #b21203 100% ) ; /* для IE10+ */
background : linear-gradient ( top , #e51d16 0% , #b21203 100% ) ; /* W3C */
filter : prog >:DXImageTransform .Microsoft .gradient ( startColorstr = ‘#e51d16’ , endColorstr = ‘#b21203’ , GradientType = 0 ) ; /* IE6-9 */
>

Весь этот код приведет к созданию довольно простой, круглой кнопки:

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

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

Теперь наша кнопка немного больше по размеру. Псевдо-элемент :before образует внешнее кольцо. Мы установили ему z-index: -1, чтобы спрятать его за кнопку и использовали абсолютное позиционирование, чтобы поставить его на нужное место.

Теперь предположим, что мы хотели сделать то же самое еще ​​раз. Это можно осуществить используя псевдо-элемент :after и повторить процесс.

Он просто добавляет еще один слой. Теперь кажется, что у нашей кнопки есть двойная, объемная рамка:

Демонстрация

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

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Как вставить картинку с помощью псевдоэлемента before?

Не могу вставить картинки с помощью псевдоэлемента before, помогите кто знает

2 ответа 2

content: »; в любом случае необходим элементам before и after, иначе они не будут работать. Но внутри кавычек контента обычно размещается только текст, который должен отображаться. Для картинки можно использовать background-image: url(»); и к нему обязательно приписать background-size (если нужно, чтобы картинка автоматически подстраивалась под размер элемента и покрывала его, background-size: cover; )

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

Можно поместить ссылку на картинку в псевдоэлементе в content: url();


Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css css3 html5 или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

Блог Vaden Pro

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

Основы применения

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

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

Какие могут возникнуть проблемы?

При использовании описанной методики нужно учитывать два важных аспекта. Первый касается особенности работы браузера Internet Explower. Данный браузер не может преобразовывать код в символы. Решением такой проблемы может стать процесс эмуляции кода через expression. Также эмуляция для отладки работы старичка Internet Explower может осуществляться через insertAdjacentHTML.

Мастер Йода рекомендует:  CISCO желает купить Skype за пять миллиардов долларов

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

К примеру, выставим дефис для обозначения маркеров списка. Записывая следующий код

Вместо тире получим чистый код.

Почему это происходит?

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

Возвращаясь к нашему примеру, переводим десятеричный код тире (8211) в шестнадцатеричный (2013). По итогу получаем следующий код, который будет корректно реализовывать автоматическое генерирование кода при использовании expression.

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

CSS псевдоэлемент ::before

Значение и применение

Псевдоэлемент ::before добавляет определённое содержимое перед каждым указанным элементом. Псевдоэлемент ::before используется вместе со свойством content, которое необходимо для вставки сгенерированного контента.

Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3:

Поддержка браузерами

Селектор Chrome

Firefox Opera Safari IExplorer Edge
::before 4.0 3.5 7.0* 3.1 9.0* 12.0

CSS синтаксис:

Версия CSS

Пример использования


Рассмотрим пример, в котором перед каждым блоком с изображением и перед каждым абзацем будет генерироваться (добавляться) определенная фраза:

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

) также добавляется определенная фраза.

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

Результат нашего примера:

Пример использования псевдоэлемента ::before.

Изменение цвета маркера через использование CSS свойства content и псевдоэлемента :before:

Изменение цвета маркера через использование CSS свойства content.

Пример использования счетчиков в CSS через использование CSS свойств content, counter-reset, counter-increment и псевдоэлемента :before:.

Пример использования счетчиков в CSS (свойства counter-reset и counter-increment).

Пример добавления и изменения кавычек в тексте, используя CSS свойства content, quotes, а также псевдоэлементов :before и :after:

Пример добавления и изменения кавычек в тексте. CSS селекторы

::before (:before)

На этой странице

В CSS, ::before создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content . По умолчания является инлайновым.

Синтаксис

В CSS3 появилась запись ::before (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :before , введённую в CSS2.

Примеры

Добавление кавычек

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

Результат

Пример оформления

Можно стилизовать текст или изображения в свойстве content практически любым способом.

Результат

Список дел

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

JavaScript

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


Результат

Примечания

Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно спецификации CSS: «Псевдоэлементы :before и :after взаимодействуют с другими элементами. как если бы они были настоящими элементами, добавленными в соответствующий им элемент.»), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент , как в примере ниже, вместо того чтобы добавлять два пустых элемента

5 приемов CSS3 с псевдоэлементами ::before и ::after

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

Что такое псевдо-элемент и чем он отличается от псевдо-класса? Почему псевдо-элементы иногда имеют одно двоеточие, а иногда и два? Как :before и :after реализован в CSS? Какие приемы используют разработчики во всем мире для создания удивительных вещей при помощи CSS? Читайте дальше, чтобы узнать это.

Псевдо-классы vs. Псевдо-элементы

Очень многие люди путают эти понятия или не понимают в чем разница (включая и меня, прежде чем погрузиться в это исследование). Если вы воспользуетесь поиском, чтобы найти различия между ними, то вы найдете длинные и слишком «технические» ответы, перемешанные с простыми, голословными заявлениями о том, что это различные вещи по сути, но без обсуждения, как и почему. Некоторые источники, такие как W3Schools, похоже, используют эти термины как взаимозаменяемые, что часто приводит к их неправильному использованию. Ответ же на этот вопрос довольно прост.

Псевдо-классы: относятся ко всему элементу

Во-первых, давайте посмотрим на псевдо-классы, которые нацелены на весь элемент или его состояние.

Как вы можете видеть, что эти условия не обязательно основаны на DOM, в результате выбирается весь элемент в каждом случае. Что в конечном итоге определяет стили для всей ссылки, параграфа, div-а и т.д.

Псевдо-элементы: целевой элемент — часть целого.

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

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

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

:before vs. ::before

Перед тем, как перейти непосредственно к объяснению :before и :after, и как их можно использовать для выполнения некоторых интересных задач, давайте проясним еще один важный момент, который часто вызывает вопросы. Если вы посмотрите в Интернете примеры с :before и :after, то вы найдете использование двух разных вариантов.

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

/*CSS3*/
.example : :before < >
.example : :after < >
.example :first-child

Как вы можете видеть, в CSS2, мы использовали одно двоеточие для определения псевдо-классов и псевдо-элементов. Однако, чтобы помочь различать их, в CSS3 добавлено второе двоеточие только для псевдо-элементов.

Проблемы с IE, опять.

Так почему же мы все еще видим оба синтаксиса в современных примерах и учебниках? Остаются ли некоторые разработчики просто в неведении относительно этого изменения? Это может и так, но, вероятно, ответственность за большинство из этих противоречий лежит на нашем старом друге — Internet Explorer-е, разрушителе всего нового и хорошего в мире веб-разработки.

Оказывается, что все современные браузеры понимают синтаксис двойного двоеточия, но, к сожалению, с IE8 это не так. По этой причине, при кодировании с ::before и ::after, большинство разработчиков предпочитают для совместимости просто использовать синтаксис CSS2 с одним двоеточием. Чтобы не усложнять объяснение мы будем придерживаться этого синтаксиса в остальной части этой статьи.

Что такое :before и :after?

Это всё была теория, но это необходимо знать, если вы собираетесь участвовать в обсуждении вопросов использования :before и :after в CSS. Теперь мы можем, наконец, посмотреть как эти вещи работают.

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

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

Этот код будет вставлять маленький значок перед каждым элементом с классом .phoneNumber. :after работает точно так же, только, как вы можете догадаться, он будет добавлять значок после номера телефона.


Небольшой пример

Одной из причин по которой :before и :after стали невероятно популярны в последнее время, является их способность значительно увеличить сложность CSS элементов. Без дополнительной разметки, мы можем использовать эти псевдо-элементы для добавления дополнительных элементов и слоев.

Чтобы увидеть, как это работает, давайте создадим простую кнопку. Тут простые стили для класса button, которые создают круг с красным градиентом.:

.button <
height : 100px ;
width : 100px ;
position : relative ;
margin : 50px ;
color : white ;
text-align : center ;
line-height : 100px ;

/*закругленные углы и тень*/
-webkit-border-radius : 100px ;
-moz-border-radius : 100px ;
border-radius : 100px ;
-webkit-box-shadow : 2px 2px 4px rgba ( 0 , 0 , 0 , 0.4 ) ;
-moz-box-shadow : 2px 2px 4px rgba ( 0 , 0 , 0 , 0.4 ) ;
box-shadow : 2px 2px 4px rgba ( 0 , 0 , 0 , 0.4 ) ;

/*градиент*/
background : #e51d16 ; /* для старых браузеров */
background : -moz-linear-gradient ( top , #e51d16 0% , #b21203 100% ) ; /* для FF3.6+ */
background : -webkit-gradient ( linear , left top , left bottom , color-stop ( 0% , #e51d16 ) , color-stop ( 100% , #b21203 ) ) ; /* для Chrome,Safari4+ */
background : -webkit-linear-gradient ( top , #e51d16 0% , #b21203 100% ) ; /* для Chrome10+,Safari5.1+ */
background : -o-linear-gradient ( top , #e51d16 0% , #b21203 100% ) ; /* для Opera 11.10+ */
background : -ms-linear-gradient ( top , #e51d16 0% , #b21203 100% ) ; /* для IE10+ */
background : linear-gradient ( top , #e51d16 0% , #b21203 100% ) ; /* W3C */
filter : prog >:DXImageTransform .Microsoft .gradient ( startColorstr = ‘#e51d16’ , endColorstr = ‘#b21203’ , GradientType = 0 ) ; /* IE6-9 */
>

Весь этот код приведет к созданию довольно простой, круглой кнопки:

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

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

Теперь наша кнопка немного больше по размеру. Псевдо-элемент :before образует внешнее кольцо. Мы установили ему z-index: -1, чтобы спрятать его за кнопку и использовали абсолютное позиционирование, чтобы поставить его на нужное место.

Теперь предположим, что мы хотели сделать то же самое еще ​​раз. Это можно осуществить используя псевдо-элемент :after и повторить процесс.

Он просто добавляет еще один слой. Теперь кажется, что у нашей кнопки есть двойная, объемная рамка:

Демонстрация

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

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Эмуляция псевдоэлементов after и before для IE 6-7

Задача

Научить IE6-7 генерировать контент, как при использовании псевдоэлементов after и before.

Немного истории

Псевдоэлементы after и before описаны еще в спецификации W3C Cascading Style Sheets, level 2 CSS2 Specification от 12 мая 1998 года. Но, как это часто бывает, процесс внедрения рекомендаций в жизнь растянулся на годы.

Opera заявила о поддержке CSS2 и, в часности, after и before с версии 4.0 (июнь 2000 года).

Safari (январь 2003 года) поддерживает after и before изначально, с версии 1.0.

В ноябре 2004 года состоялся релиз Firefox 1.0. Начиная с этой версии присутствует частичная поддержка before и after. К сожалению, в этих элементах не срабатывали, например, свойства position, float и list-style. Полная поддержка реализована только в версии 3.0 (июнь 2008 года).

Вышедшая в декабре 2008 года версия Chrome 1.0.154.36 (которая считается первой стабильной) тоже не вызывает в этом вопросе нареканий.

Дольше всех боролся с прогрессом Сами Знаете Какой Браузер. Даже появившийся в октябре 2006 года IE7 не утруждает себя поддержкой after и before. Сдался IE только в марте 2009 года, с выходом 8-й версии.

Таким образом, на данный момент безопасно использовать after и before как минимум для Opera, FF, Safari, Chrome, IE8. Если подобрать прием для IE6-7, то можно смело применять эти полезные псевдоэлементы!

Теория

Используя псевдоэлементы after и before можно вставлять автоматически генерируемый контент до и после элемента HTML. Что конкретно будет вставлено, задается CSS свойством content.


На практике это выглядит следующим образом. Попробуем, например, сделать FAQ используя список определений. Будем автоматически подставлять слова «Вопрос:» и «Ответ:».

В CSS прописываем псевдоэлементы и отступ для красоты.

Для большинства браузеров этого достаточно.

Решение

Для того, чтобы предыдущий пример сработал в IE6-7, будем использовать expression и свойство innerHTML.

CSS теперь будет такой:

Само собой в боевых условиях вместо хаков создаем отдельный CSS, который подключаем условным комментарием.

Основной момент отражен в строках 03 и 07. Это оптимизированный expression, который выполнится только один раз. Свойство innerHTML позволяет получить доступ к HTML коду, который находиться между открывающим и закрывающим тегами.

  • запись this.innerHTML = «Генерируемый контент» + this.innerHTML обеспечит вставку нового контента до существующего (т.е. эмуляция before);
  • запись this.innerHTML = this.innerHTML + «Генерируемый контент» обеспечит вставку нового контента после существующего (эмуляция псевдоэлемента after);
  • выражение, взятое в кавычки («Генерируемый контент») — это значение эмулируемого CSS свойства content (то, что собственно вставляем).

Решение 2. Используем insertAdjacentHTML

Update 1.06.10. Предыдущий вариант в некоторых случаях вызывает сбои в работе IE6. Более устойчивым является использование метода insertAdjacentHTML. Фрагмент CSS, для IE6-7 в этом варианте будет таким:

Для псевдоэлемента before используем параметр afterBegin, для after — beforeEnd.

Особенности вставки спецсимволов

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

Притормози, дружище

Проходить главу «Селекторы, часть 2» можно после оформления подписки.

Консультация по телефону 8 800 555-86-28 .

Курсы

Профессии

Информация

Услуги

Остальное

Регистрация

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Восстановление доступа

Забыли пароль или потеряли доступ к профилю? Введите привязанную к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.

Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.

Мастер Йода рекомендует:  Как установить wordpress на денвер – шпаргалка для начинающих
Добавить комментарий