Псевдоэлемент - ::before » Новости мира Интернет
Новая ролевая модель в Вебмастере — «Блог для вебмастеров»
Новая ролевая модель в Вебмастере — «Блог для вебмастеров»
Почти полноценную Windows XP теперь можно запустить прямо в браузере - «Новости сети»
Почти полноценную Windows XP теперь можно запустить прямо в браузере - «Новости сети»
Microsoft узнала о критической уязвимости SharePoint ещё два месяца назад, но не смогла её исправить - «Новости сети»
Microsoft узнала о критической уязвимости SharePoint ещё два месяца назад, но не смогла её исправить - «Новости сети»
Слухи: новым руководителем российского издателя «Мира танков» и «Мира кораблей» станет бывший гендиректор «ВКонтакте» - «Новости сети»
Слухи: новым руководителем российского издателя «Мира танков» и «Мира кораблей» станет бывший гендиректор «ВКонтакте» - «Новости сети»
Эксперты рассказали, как не получить штраф за поиск экстремистских материалов - «Новости сети»
Эксперты рассказали, как не получить штраф за поиск экстремистских материалов - «Новости сети»
Многих буквально тошнит от езды в электромобилях, и учёные нашли этому объяснение - «Новости сети»
Многих буквально тошнит от езды в электромобилях, и учёные нашли этому объяснение - «Новости сети»
NVIDIA приступила к производству ИИ-ускорителей GB300 / ServerNews - «Новости сети»
NVIDIA приступила к производству ИИ-ускорителей GB300 / ServerNews - «Новости сети»
10 долгих лет: состоялся официальный запуск экзафлопсного суперкомпьютера Aurora / ServerNews - «Новости сети»
10 долгих лет: состоялся официальный запуск экзафлопсного суперкомпьютера Aurora / ServerNews - «Новости сети»
«Больше похоже на Fallout, чем последние игры серии»: новый геймплей неофициального шутера Fallout: Bakersfield на движке Doom впечатлил фанатов - «Новости сети»
«Больше похоже на Fallout, чем последние игры серии»: новый геймплей неофициального шутера Fallout: Bakersfield на движке Doom впечатлил фанатов - «Новости сети»
Cyberpunk 2077 протестировали на компьютерах Apple Mac с чипами от M1 до M4 - «Новости сети»
Cyberpunk 2077 протестировали на компьютерах Apple Mac с чипами от M1 до M4 - «Новости сети»
Новости мира Интернет » Справочник CSS » Псевдоэлемент - ::before
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 7.0+ 1.0+ 1.5+ 1.0+ 1.0+

Краткая информация

Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/css3-selectors/#gen-content

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

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

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

Синтаксис

элемент::before { content: "текст"

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>before</title>
  <style>
   li::before {
     content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ 
   
   li {
     list-style: none; /* Убираем исходные маркеры */ 
   
  </style>
 </head>
 <body>
   <ul>
     <li>Альфа</li>
     <li>Бета</li>
     <li>Гамма</li>
   </ul>
 </body>
</html>

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

.;


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

Браузеры

Браузер Internet Explorer до версии 9.0 работает только с нотацией :before, описанной в спецификации CSS.;2.1.

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Internet Explorer Chrome Opera Safari Firefox Android iOS 9.0 1.0 7.0 1.0 1.5 1.0 1.0 Краткая информация Применяется Ко всем элементам Ссылка на спецификацию Версии CSS CSS 1 CSS 2 CSS 2.1 CSS 3 Описание Псевдоэлемент ::before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content. Для ::before характерны следующие особенности. При добавлении ::before к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block. При добавлении ::before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline. ::before наследует стиль от элемента, к которому он добавляется. Синтаксис элемент::before _

Смотрите также

А что там на главной? )))



Комментарии )))