Что такое before css

Псевдоэлемент :before

Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

Для :before характерны следующие особенности.

  • При добавлении :before к блочному элементу, значение свойства display может быть только: block , inline , none , list-item . Все остальные значения будут трактоваться как block .
  • При добавлении :before к встроенному элементу, display ограничен значениями inline и none . Все остальные будут восприниматься как inline .
  • :before наследует стиль от элемента, к которому он добавляется.

Синтаксис

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента :before выводится символ ¶. Результат примера продемонстрирован на рис. 1.

Использование псевдоэлемента :before в списках

Рис. 1. Использование псевдоэлемента :before в списках

Браузеры

Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <pre> .

Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :before к тегу <fieldset> .

Firefox до версии 3.5 не допускает применение к :before свойств position , float , list-style-type и некоторых значений display .

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

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

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

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

Сама приставка «псевдо-» говорит о том, что это не реальные элементы. Они не видимы для поисковых систем, используются только для оформления контента. Эти элементы определяются в CSS коде.

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

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

Здесь важно отметить две вещи. Во первых, мы указываем на реальный html элемент с помощью строк #example:before и #example:after. Приставки после двоеточия, означают, что это стиль не просто элемента, а его псевдоэлементов.

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

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

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

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

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

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

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

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

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

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

Стили псевдоэлементов before и after

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

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

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

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

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

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

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

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

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

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

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

CSS ::before Selector

Insert some text before the content of each <p> element:

More "Try it Yourself" examples below.

Definition and Usage

The ::before selector inserts something before the content of each selected element(s).

Use the content property to specify the content to insert.

Use the ::after selector to insert something after the content.

Version: CSS2

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
::before 4.0 9.0 3.5 3.1 7.0

CSS Syntax

More Examples

Example

Insert content before every <p> element’s content, and style the inserted content:

Related Pages

We just launched
W3Schools videos

COLOR PICKER

Get certified
by completing
a course today!

CODE GAME

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials
Top References
Top Examples
Web Courses

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Добавить комментарий

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