<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Псевдоэлементы 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 class="bitcoin">Биткойн</li>
<li class="dollar">Доллар</li>
<li class="euro">Евро</li>
<li class="rub">Рубль</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.

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

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

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

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

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

Порекомендуйте эту статью друзьям:

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

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

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