After before – ::after / ::before | CSS-Tricks - Блог сумасшедшего сисадмина

Содержание

Псевдоэлементы 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-разметку, а прописать только в стилях.

Для тега 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.

Шаг 2

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

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 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";

}

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

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

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

Создано 21.05.2018 11:26:30

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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:»☎»):

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

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

.phoneNumber:after {
content:»&#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
Русский
ไทย
한국어
日本語
简体中文
繁體中文

Filters

before-after

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

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

After before – ::after / ::before | CSS-Tricks