Псевдоэлементы after и before. Примеры

Псевдоэлементы after и before. Примеры

В этой статье вы узнаете историю возникновения и использования псевдоэлементов after и before в CSS. Рассмотрим несколько примеров, где они активно используются.

Для вывода не семантического контента

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

<ul>
<li>+ сахар</li>
<li>+ молоко</li>
<li>+ мука</li>
</ul>

Разработчики спецификации CSS для упрощения кода, придумали псевдоэлементы, такие как after и before.

li {
   list-style-type: none; /* Убираем маркеры */
}

Появилась возможность, в начале каждого элемента <li> выводить повторяющийся контент content: «+ «, не прописывая его реально в

HTML-файле, а только в файле стилей. Эта запись буквально говорит, поставь плюс в начале каждого элемента списка.

li:: before {
   content: "+ ";
}

А этот код аналогичным образом, ставит ? знак в конце каждого элемента списка.

li:: after {
   content: "? ";
}

В HTML-разметке, нет никаких знаков.

<ul>
<li>сахар</li>
<li>молоко</li>
<li>мука</li>
</ul>

На странице, мы увидим:

  • + сахар ?
  • + молоко ?
  • + мука ?

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

Таким образом первоначальная идея появления псевдоэлементов before и after – добавление контента в начале и в конце элемента, превратилась в широко используемый инструмент верстальшика.

Отмена действия float для последующего блока

Рассмотрим такой пример:

<article>
   <img src="http://via.placeholder.com/200x150" alt="картинка статьи">
   <p>Текст статьи</p>
</article>
   <footer>
     Подвал сайта
   </footer>

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

img {
float: left;
}

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

Псевдоэлементы after и before. Примеры

Для тега footer в стилях – прописываем псевдоэлемент (воображаемый элемент) before (перед). Код ниже говорит – до блока footer, якобы выводится некий контент табличного вида , на который действие обтекания отменяется clear: both;

footer::before {
content: " ";
clear: both;
display: table;
}

Почему в коде, где применяются after и before, всегда присутствует пустой

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

Font Awesome – вставка иконок помощью псевдоклассов ::before и ::after

Речь идет о выводе шрифтовых иконок на сайте, обычно у пунктов меню просто списков, кнопок, полей форм. Ниже приведен пример с добавлением иконок для списка валют.

Шаг 1

Скачиваем с сайта https://fontawesome.ru/ иконочный шрифт и подключаем к своему сайту через файл CSS.

Псевдоэлементы after и before. Примеры

Шаг 2

Делаем HTML-разметку

<ul>
<li>Биткойн</li>
<li>Доллар</li>
<li>Евро</li>
<li>Рубль</li>
</ul>

Шаг 3

Делаем для наглядности CSS оформление

Псевдоэлементы after и before. Примеры

Шаг 4

На сайте fontawesome.ru выбираем нужные иконки.

Псевдоэлементы after и before

Шаг 5

Копируем цифровой код в Unicode.

Псевдоэлементы after и before. Примеры

Шаг 6

Задаем стили для иконочного шрифта.

li:before {
font-family: fa;
padding-right: 5px;
}
.bitcoin:before {
content: "\f15a";
}
.dollar:before {
content: "\f155";
}
.euro:before {
content: "\f153";
}
.rub:before {
content: "\f158";
}

Готовый результат

Псевдоэлементы after и before. Примеры

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

Если, после прочтения данной статьи все ещё остаются вопросы, то рекомендую пройти этот «видеокурс».

  • Псевдоэлементы after и before. Примеры Создано 21.05.2018 11:26:30
  • Псевдоэлементы after и before. Примеры Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

myrusakov.ru

Всё о :Before и :After в CSS

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

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

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

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

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

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

a:link {color: #111}
a:hover {color: #222}

div:first-child {color: #333}
div:nth-child(3) {color: #444}

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

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

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

p::first-line {color: #555}
p::first-letter {color: #666}
a::before {content : «hello world»;}

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

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

:before vs. ::before

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

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

/*CSS2*/
.example:before {}
.example:after {}
.example:first-child {}
 
/*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:»&#9742;»):

.phoneNumber:before {
 content:»&amp;#9742;»;
 font-size: 15px;
}

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

.phoneNumber:after {
 content:»&amp;#9742;»;
 font-size: 15px;
}

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

Одной из причин по которой :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: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e51d16′, endColorstr=’#b21203′,GradientType=0 ); /* IE6-9 */
}

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

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

.button:before {
 content:»»;
}

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

.button:before {
 content:»»;
 width: 100%;
 height: 100%;
 display: block;
 z-index: -1;
 position: relative;
 padding: 15px;
 background: #ddd;
 left: -15px;
 top: -15px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;
 -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
 -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
 box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

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

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

.button:after {
 content:»»;
 width: 100%;
 height: 100%;
 display: block;
 z-index: -2;
 position: relative;
 padding: 25px;
 background: #eee;
 position: absolute;
 left: -25px;
 top: -25px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;
 -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
 -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
 box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

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

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

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

Перевод статьи с designshack.net


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

www.webmasters.by

Before-after Images, Stock Photos & Vectors

You’re currently using an older browser and your experience may not be optimal. Please consider upgrading. Learn more. Images
  • Images home
  • Curated Collections
  • Photos
  • Vectors
  • Offset Images
  • All categories
Footage
  • Footage home
  • Curated collections
  • All categories
  • Shutterstock Select
  • Shutterstock Elements
Editorial
  • Editorial home
  • Entertainment
  • News
  • Royalty
  • Sports
Music
  • Music home
  • PremiumBeat
Tools
  • Shutterstock Editor
  • Mobile apps
  • Plugins
  • Image resizer
  • File converter
  • Collage maker
  • Color schemes
Blog
  • Blog home
  • Design
  • Video
  • Contributor
  • News

  • PremiumBeat blog
Get helpSell contentPricing

English

  • Čeština
  • Dansk
  • Deutsch
  • English
  • Español
  • Français
  • Italiano
  • Magyar
  • Nederlands
  • Norsk
  • Polski
  • Português
  • Suomi
  • Svenska
  • Türkçe
  • Русский
  • ไทย
  • 한국어
  • 日本語
  • 简体中文
  • 繁體中文

Log in

Sign up

Menu

Filters

before-after

Categories
    Browse image categories
  • Abstract
  • Animals/Wildlife
  • Backgrounds/Textures
  • Beauty/Fashion
  • Buildings/Landmarks
  • Business/Finance
  • Celebrities
  • Editorial
  • Education
  • Food and Drink
  • Healthcare/Medical
  • Holidays
  • Illustrations/Clip-Art
  • Industrial
  • Interiors
  • Miscellaneous
  • Nature
  • Objects
  • Parks/Outdoor
  • People
  • Religion
  • Science
  • Signs/Symbols
  • Sports/Recreation
  • Technology
  • The Arts
  • Transportation
  • Vectors
  • Vintage

  • Sort by
    • Most relevant

      Fresh content

  • Image type
    • All images

      Photos

      Vectors

      Illustrations

  • Orientation
    • All orientations

      Horizontal

      Vertical

  • Color

  • People
    • With people

      Without people

  • Ethnicity
    • African

      African American

      Black

      Brazilian

      Chinese

      Caucasian

      Show more

  • Age
    • Infants

      Children

      Teenagers

      20s

      30s

      40s

      50s

      60s

      Older

  • Gender
    • Male

      Female

      Both

  • Number of people
    • 1

      2

      3

      4+

  • Category
    • Select a category

      All categories

      Select a category

  • Artists
    • www.shutterstock.com