Before css что это

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

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

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

Но если проект не требует поддержку браузера Internet Explorer 8, то рекомендуется в CSS коде для определения псевдоэлементов писать два двоеточия. В противном случае необходимо использовать одно двоеточие, т.к. Internet Explorer 8 не поддерживает запись с :: .

Обратите внимание, что псевдоэлементы не добавляются в DOM. Поэтому получить псевдоэлемент с помощью JavaScript и с использованием библиотеки jQuery нельзя.

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

• first-letter
• first-line
• before
• after
• selection

CSS псевдоэлемент first-letter

Псевдоэлемент first-letter предназначен для задания стилей первому символу в тексте блочного элемента, но только в том случае если перед этим символом нет другого контента (изображения, inline таблицы).

К этому псевдоэлементу могут применяться только ограниченный набор CSS свойств. К ним относятся свойства, имеющие отношения к цвету, фону, границам, свойствам шрифта, полям padding и margin.

CSS3 синтаксис first-letter :

selector::first-letter { /* стили для оформления первого символа */ }

Если с помощью псевдоэлемента before и CSS-свойства content добавить некоторый текст к элементу, то в этом случае first-letter применит заданные стили к первому символу этого текста.

Примеры использования псевдоэлемента first-letter .

/* пример 1 */ .text::first-letter { font-size: 1.5em; background-color: #000; color: #fff; margin-right: 0.2em; padding: 0 0.2em 0.1em 0.2em; border-radius: 0.1em; }

/* пример 2 (с использование float) */ .text::first-letter { float: left; font-size: 1.5em; background-color: #000; color: #fff; margin: 0.3em 0.2em 0 0; padding: 0 0.2em 0.1em 0.2em; border-radius: 0.1em; }

/* пример 3 (оформление первого символа с помощью рамки) */ .text::first-letter { font-size: 1.5em; border: 1px dashed #999; margin-right: 0.2em; padding: 0 0.2em 0.1em 0.2em; border-radius: 0.1em; }

CSS псевдоэлемент first-line

Псевдоэлемент first-line предназначен для оформления первой строки форматированного текста элемента с блочным отображением.

К этому псевдоэлементу можно применять только ограниченный набор CSS свойств, такие же как к first-letter .

selector::first-line { /* стили, которые нужно применить к первой строке */ }

Пример, в котором с помощью псевдоэлемента first-line преобразуем символы первой строки текста в прописные и установим им жирное начертание.

.text::first-line { text-transform: uppercase; font-weight: bold; }

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

 
Lorem ipsum, 
dolor sit amet consectetur adipisicing elit. Doloribus molestiae aspernatur beatae harum, obcaecati ipsam neque eaque quos consequatur dolor ab voluptatibus. Provident, dolorem?
 

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

before предназначен для создания псевдоэлемента внутри элемента перед его контентом. По умолчанию данный псевдоэлемент имеет display: inline . Если псевдоэлементу before нужно установить другое отображение, то его нужно указать явно (например: display: block ).

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

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

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

after аналогичен before с одной лишь разницей, что он в отличии от последнего создаёт псевдоэлемент внутри элемента не перед его контентом, а после него .

.blockquote::before { content: ""; } .blockquote::after { content: ""; }

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

1. Применение CSS псевдоэлементов after и before для оформления цитаты.

HTML разметка цитаты:

Текст цитаты.
 

CSS код для оформления цитаты:

.blockquote { margin: 0 auto; max-width: 400px; position: relative; padding: 5px 32px; background-color: #e0f2f1; color: #004d40; border-radius: 4px; } .blockquote::before { content: '\201e'; position: absolute; top: -16px; left: 6px; font-family: Georgia, serif; font-size: 40px; line-height: 1; font-weight: bold; } .blockquote::after { content: '\201c'; position: absolute; right: 6px; font-family: Georgia, serif; font-size: 40px; line-height: 1; font-weight: bold; }

2. Пример использования псевдоэлемента before для разделения элементов в хлебных крошках.

HTML структура хлебных крошек:

CSS код хлебных крошек:

.breadcrumb { display: flex; flex-wrap: wrap; padding: .75rem 1rem; margin-bottom: 1rem; list-style: none; color: #b39ddb; background-color: #ede7f6; border-radius: .25rem; } .breadcrumb__item>a { text-decoration: none; color: #673ab7; } .breadcrumb__item>a:hover { text-decoration: none; color: #311b92; } .breadcrumb__item+.breadcrumb__item { padding-left: 8px; } /* добавление разделителя между элементами хлебных крошек с помощью псевдоэлемента before */ .breadcrumb__item+.breadcrumb__item::before { display: inline-block; padding-right: 8px; color: #673ab7; content: "•"; }

Изображение хлебных крошек:

3. Пример добавления hover эффекта к ссылке, оформленной с помощью background картинки, с использованием псевдоэлементов after и before.

Псевдоэлемент before используется для затемнения изображения, а after — для отображения картинки «Запустить».

HTML код ссылки:

CSS код с использованием after и before:

.image__over { position: relative; display: block; overflow: hidden; padding-top: 56.25%; background: url(buterfly.jpg) no-repeat; background-size: cover; border-radius: 4px; } .image__over:hover::before, .image__over:focus::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(48, 53, 71, .4); cursor: pointer; } .image__over:hover::after, .image__over:focus::after { content: ""; position: absolute; top: 50%; left: 50%; height: 64px; width: 72px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 72px 64px; background-repeat: no-repeat; background-position: center center; margin-left: -32px; margin-top: -36px; cursor: pointer; }

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

HTML разметка этого примера:

.image__over { display: inline-block; font-size: 0; position: relative; overflow: hidden; border-radius: 4px; } .image__over>img { max-width: 400px; } .image__over:hover::before, .image__over:focus::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(48, 53, 71, .4); cursor: pointer; } .image__over:hover::after, .image__over:focus::after { content: ""; position: absolute; top: 50%; left: 50%; height: 64px; width: 72px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 72px 64px; background-repeat: no-repeat; background-position: center center; margin-left: -32px; margin-top: -36px; cursor: pointer; }

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

Псевдоэлемент selection предназначен для установления стилей к выделенному пользователем фрагмента текста.

CSS свойства, которые можно использовать для оформления этого псевдоэлемента очень мало. Это background , color , cursor и outline .

/* для Firefox */ ::-moz-selection { /* стили для оформления выделенного фрагмента текста */ } ::selection { /* стили для оформления выделенного фрагмента текста */ }

Пример, в котором зададим стили для оформления выделенного пользователем фрагмента текста:

.text::selection { background-color: #9c27b0; color: #fff; }

Псевдоэлементы (:before, :after) в CSS

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

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

 div < background: #eaf2f5; padding: 30px; >div:before < content: '“'; font-size: 50px; position: relative; top: -30px; left: -20px; float: left; >div:after 
Тише, мыши, кот на крыше
 

Получится такой результат:

Тише, мыши, кот на крыше

При создании псевдоэлементов их свойства display совпадает со значением родителя.
Cмотрите другие статьи:
Была ли эта статья полезна? Есть вопрос?
Закажите недорогой хостинг Заказать
всего от 290 руб

Если у Вас появились вопросы по материалам на нашем сайте, то пожалуйста, пришлите нам их на почтовый адрес support@mousedc.ru. Мы обязательно ответим.

Также Вы можете отправить нам свой отзыв на наши услуги, замечание или предложение. Мы ценим наших клиентов и внимательно прислушиваемся ко всем замечаниям!

Последние новости

• Генератор паролей
• Генератор .htpasswd

Коврик для мыши новым клиентам

Оплатите хостинг на год и получите удобный коврик

Помощь в переносе
с другого хостинга

Хотите переехать? Мы поможем перенести всё

Запишитесь на интенсивные курсы по созданию сайтов.

Приветствуем всех в нашем уютном дата центре! Мы предоставляем качественный и надёжный хостинг. У нас можно заказать домены и VPS, прочитать статьи по созданию сайтов и информационной безопасности. А из наших видео подкастов можно узнать о том, как продвигать и развивать iT-проекты.

• Пользовательское соглашение
• Политика конфиденциальности
• Публичная оферта
• Антиспам соглашение

Copyright © 2019-2024 «MouseDC.ru».
Все права защищены товарными
знаками и свидетельствами.

: : before

Удобный способ создать элемент без дополнительной HTML-разметки.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 14 июня 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Когда мы в CSS добавляем : : before к селектору, для соответствующего элемента создаётся псевдоэлемент. Этот псевдоэлемент — его самый первый потомок, он идёт до внутреннего содержимого.

Пример

Скопировать ссылку «Пример» Скопировано

 a::before  content: "♥";> a::before  content: "♥"; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 ::before  /* Для CSS 3 */> :before  /* Для CSS 2 */> ::before  /* Для CSS 3 */ > :before  /* Для CSS 2 */ >    Скопировать Скопировано Не удалось скопировать   

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

Как понять

Скопировать ссылку «Как понять» Скопировано

Проще всего воспринимать псевдоэлемент : : before как дополнительный элемент в начале тега. Мы можем применить к нему любые стили.

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

По умолчанию псевдоэлемент : : before является строчным.

Самый простой пример использования : : before — добавление иконки перед важным текстом:

   
Внимание! Этот абзац является важным предупреждением!   
Этот абзац является информационным.  div class="message"> p class="warning">Внимание! Этот абзац является важным предупреждением!p> div> div class="message"> p class="info">Этот абзац является информационным.p> div>    Скопировать Скопировано Не удалось скопировать   

 .warning::before  content: "⚠"; margin-right: 0.5em;> .warning::before  content: "⚠"; margin-right: 0.5em; >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Не забывайте прописывать свойство content для псевдоэлемента : : before . Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.

�� Псевдоэлемент ведёт себя ровно так же, как любой другой элемент в разметке, подчиняется тем же свойствам и законам. Просто его нет в HTML.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

�� Псевдоэлемент : : before очень часто используют для стилизации нестандартных маркеров списка:

 li::before  content: "��"; margin-right: 5px;> li::before  content: "��"; margin-right: 5px; >    Скопировать Скопировано Не удалось скопировать   

�� Пример с пустым свойством content :

 li  position: relative; padding-left: 25px;> li::before  /* Не забываем о свойстве content */ content: ""; width: 14px; height: 14px; background-color: #2E9AFF; position: absolute; left: 0; top: 5px;> li  position: relative; padding-left: 25px; > li::before  /* Не забываем о свойстве content */ content: ""; width: 14px; height: 14px; background-color: #2E9AFF; position: absolute; left: 0; top: 5px; >    Скопировать Скопировано Не удалось скопировать   

Псевдоэлементы — Основы верстки контента

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

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

   class="first-letter">Ж ил старик со своею старухой У самого синего моря; Они жили в ветхой землянке Ровно тридцать лет и три года.  

article  color: #37474f; font: 25px/1.5 serif; > .first-letter  color: #f44336; font-size: 2em; line-height: 1; > 

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

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

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

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

article  color: #37474f; font: 25px/1.5 serif; > article p::first-letter  color: #f44336; font-size: 2em; line-height: 1; > 

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

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

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

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

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

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

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

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

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

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

 class="square bg-black text-white"> Контент внутри блока  

.square::before  content: "Текст до контента внутри блока"; > .square::after  content: "Текст после контента внутри блока"; > 

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

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

 Обучение на Хекслете  class="hexlet-ul"> Большое количество теории Множество практик и дополнительных заданий Комплексные проекты для закрепления знаний  

.hexlet-ul  list-style: none; > .hexlet-ul li  position: relative; margin-bottom: 20px; > .hexlet-ul li::before  position: absolute; left: -30px; width: 20px; height: 20px; background-image: url("https://assets.codepen.io/1425525/hexlet_logo.png"); background-repeat: no-repeat; background-size: cover; content: ""; > 

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

.hexlet-ul li::before  width: 20px; height: 20px; content: ""; > 

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

.hexlet-ul li::before  background-image: url("https://assets.codepen.io/1425525/hexlet_logo.png"); background-repeat: no-repeat; background-size: cover; > 

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

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

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

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

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях: