Как сделать псевдоэлемент под блоком

Обновлено: 07.07.2024

В прошлых уроках мы разобрали псевдоклассы — изменение существующих элементов в зависимости от их состояния. А возможно ли задать или создать стили для таких элементов, которых нет внутри HTML? Да! И для этого в CSS существует понятие псевдоэлементов.

Разберёмся на примере стилизации буквицы. Буквица — увеличенный первый символ в параграфе. Вы часто можете встретить этот приём в книгах со сказками или книгах, стилизованных под старину. Каким способом это можно сделать? Первое, что приходит в голову — обернуть первый символ в отдельный тег и стилизовать именно его.

Хороший и рабочий вариант, подходящий для точечных изменений в некоторых текстах. Какие проблемы тут могут быть скрыты? Во-первых: если таких текстов много, то добавлять теги к каждому нужному параграфу достаточно долго и риск ошибки возрастает. Можно забыть проставить тег или проставить не на первой букве. Во-вторых, масштабируемость падает. В случае избавления от буквицы нужно удалить все классы или удалить стили, но тогда останутся ненужные теги, которые скорее запутают.

Как можно выйти из этой ситуации? Тут в дело и вступают псевдоэлементы. Они могут виртуально создать за нас такой тег и стилизовать его используя только CSS. Это решает сразу две проблемы, которые были описаны выше:

Нет необходимости проставлять новые теги. Достаточно только указать нужный селектор в CSS.
После удаления такого класса в HTML не останется ненужных тегов.

За стилизацию первого символа отвечает псевдоэлемент ::first-letter . Он виртуально обернёт первый символ и применит к нему пользовательские стили. Немного перепишем пример и для всех параграфов внутри article укажем буквицу.

Результат не изменился, но, с точки зрения работы браузера, произошло много изменений. Браузер автоматически нашёл первый символ в параграфе, который находится внутри article. Обернул его и применил стили, описанные в CSS.

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

before и after

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

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

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

::before и ::after позволяют создать новый контент внутри HTML дерева. Этот контент привязан к определённому элементу и может появляться до него или после. Именно поэтому псевдоэлементы называются так:

::before — псевдоэлемент, позволяющий добавить контент перед выбранным элементом.
::after — псевдоэлемент, позволяющий добавить контент после выбранного элемента.

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

Создадим блочный элемент и воспользуемся новыми псевдоэлементами.

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

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

Разберём, что происходит в псевдоэлементе .hexlet-ul li::before :

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

Устанавливаем изображение для блока. Для этого мы используем три свойства:

background-image — свойство, позволяющее установить изображение в качестве фона. Внутри используем функцию url для указания адреса, по которому расположено изображение.
background-repeat — повтор изображения. Нужно ли повторять изображение, если это возможно? В данном случае нет, так как нам нужно конкретное изображение, а не повторяющийся фон. Значение no-repeat запрещает повторять изображение.
background-size — размер изображения. Ключевое слово cover масштабирует изображение с сохранением пропорций и вписывает его в высоту или ширину существующего блока.

Позиционировав этот псевдоэлемент мы получили изображение в качестве маркера списка. Для этого не пришлось подстраивать изображение, так как эта работа осталась за CSS.

Самостоятельная работа

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

Дополнительные материалы

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

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

Об обучении на Хекслете

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

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

С псевдоэлементами before и after , вы наверняка уже знакомы, неоднократно их применяли, но мало кто понимаете их назначения, и немного о них поговорим.

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

::before – означает, до или впереди (то есть, разместить элемент в впереди контента).

::after – после или за (то есть, разместить элемент за контентом).

Без чего это все работать не будет, это свойство content: “”; именно в нем мы прописываем значение, которое выводим в псевдоэлементе.

Давайте разберемся, при каких обстоятельствах они применяются рассмотрим пример с формой.

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

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

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

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

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

Добавляем контент при помощи ::before и ::after

Что бы использовать псевдоэлементы, нужно определиться, в какой блок структуры, планируем их добавлять, и для какой цели они там нужны. Допустим, мы хотим придать некий шарм тексту в нутрии кнопки, и это оформление будет в виде дополнительных символов, впереди и позади основного содержания.

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

Далее создаем свойство content , и в нутрии кавычек прописываем символ, который хотим отобразить \21D2 .

Как видим, появился первый элемент, и по такому же принципу создаем за текстовым содержанием второй элемент при помощи ::after .

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

Эффект у кнопки

На базе псевдоэлементов сделаем эффект по наведению на кнопку.

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

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

Текст при наведении делаем белым цветом.

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

Начинаем с псевдоэлемента ::before , это будет блок который расположим с левой стороны. Текстовую информацию он не содержит, поэтому убираем все содержимое content , оставляем только пустые кавычки, так как без них псевдоэлемент не отображается. Делаем его блочным элементом шириной и высотой равной самой кнопки. Задаем задний фон, и при помощи позиционирования смещаем блок в левую сторону.

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

Как видите, получается много дублирующего кода, давайте это все объединим и добавим плавность передвижения.

Анимируем передвижение

При наведении возвращаем координаты в нулевое положение.

Добавляем небольшую паузу, между перемещением блоков.

Что бы видеть текст кнопки задаем их приоритет при помощи z-index.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Появилась возможность, в начале каждого элемента выводить повторяющийся контент content: "+ ", не прописывая его реально в HTML-файле, а только в файле стилей. Эта запись буквально говорит, поставь плюс в начале каждого элемента списка.

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

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

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

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

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

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

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

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

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

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

footer::before content: " ";
clear: both;
display: table;
>

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

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

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

Шаг 1

Шаг 2

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

Шаг 3

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

Шаг 4

Шаг 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.

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

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

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

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

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

Она выглядит вот так:

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

Читайте также: