Почему псевдоэлементам: before и: after требуется свойство content?

С учетом следующего сценария, почему селектору: after требуется свойство содержимого для работы?

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
}

Обратите внимание, как вы не видите псевдоэлемент, пока не укажете свойство содержимого:

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
    content:"hi";
}

Почему это предполагаемая функциональность? Можно подумать, что блок отображения заставит элемент появиться. Как ни странно, вы можете увидеть стили внутри веб-отладчиков; однако они не отображаются на странице.

Ответы на вопрос(4)

Основываясь на ваших комментариях к чужим ответы, я считаю, что ваш вопрос на самом деле:

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

Причина в том, что:

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

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

 Следовательно, все псевдоклассы невидимы (их 'содержание» свойства не имеют значения)если вы не скажете им не быть (давая им значение с помощью объявлений CSS).

Возьмите эту простую страницу:


<p> </p>

Мы знаем, что эта страница ничего не будет отображать, потому что

 элемент не имеет текста. Более точный способ перефразировать это, это то, что

 элемент'Свойство содержимого s не имеет значения.

Мы можем легко изменить это, установив свойство содержимого элемента h1в разметке HTML:


<p>This sentence is the content of the p element.</p>

Это теперь будет отображаться при загрузке, потому что свойство содержимого

 элемент имеет значение; это значение является строкой:

"This sentence is the content of the p element."

В качестве альтернативы мы можем вызвать

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

 элементв CSS:

p { content: "This sentence is the content of the p element set in the CSS."; }

Эти два способа ввода строки в

 элемент идентичен.

Теперь рассмотрим то же самое с псевдоклассами:

HTML:
  
      <p class="text-placeholder">P</p>
  

CSS:
  p:before { content: "BEFORE... " ; }
  p:after { content: " ...and AFTER"; }

Результат:

BEFORE...  P ...and AFTER

Наконец, представьте, как бы вы выполнили этот примербез используя CSS. Это'Это невозможно, потому что нет способа установить содержимое псевдокласса в разметке HTML.

Вы можете быть творческими и представить, что-то вроде этого может работать:

BEFORE... <p></p>
<p> P </p>
 ...and AFTER<p></p>

Но это нет, потому что а также не являются элементами HTML.

В заключение:

Псевдоклассы существуют для каждого элемента разметки.Они невидимы по умолчанию, потому что они инициализируются без свойства содержимого.Вы НЕ МОЖЕТЕ установить свойство содержимого для псевдо-классов с помощью HTML-разметки.

 Следовательно, псевдоэлементы Свойство содержимого должно быть объявлено с помощью деклараций CSS, чтобы их можно было отобразить.
 BoltClock03 мар. 2017 г., 04:35
Этот ответ былочень сбивает с толку при первом чтении, и мне пришлось сделать второй проход со всеми случаями "Псевдо-класс» заменено на "Псевдо-элемент» (и все существующие варианты использования "Псевдо-элемент» нетронутый). Обратите внимание, что эти два термина не являются взаимозаменяемыми.

Пока не добавишьcontent: ...псевдоэлемент нет на самом делесуществовать.

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

 Dave C12 июн. 2013 г., 16:46
Я полностью понимаю, что это было реализовано таким образом ... может быть, я должен перефразировать мой вопрос ... почему нетВ спецификации предполагается, что когда определен элемент psuedo, который имеет содержимое: ""? Есть ли какие-либо доводы в пользу предположения об отсутствии элемента? Особенно, когда любой элемент psuedo без контента - абсолютно мертвый стиль. Я полагаю, вы можете оставить это скрытым и добавить контент: "" позже с другим стилем; однако такое поведение может быть достигнуто с помощью display: none.
 Marc Audet12 июн. 2013 г., 16:32
@DaveC Значение свойства content - это то, где вы вводите контент, который будет добавлен как сгенерированный элемент. Если есть контент, нет необходимости генерировать элемент.
 Dave C12 июн. 2013 г., 16:25
Но зачем вообще это требование? Безразлично»t существование селектора после: показать необходимость элемента?
 Marc Audet12 июн. 2013 г., 16:39
@DaveC Извините, я неправильно указал. Если свойство content отсутствует, генерировать псевдоэлемент не нужно. Как вы заметили, псевдоэлемент может иметь пустую строку в качестве значения.
 Dave C12 июн. 2013 г., 16:35
Я категорически не согласен. С этой логикой, добавляя контент: "" приведет к тому, что теги after исчезнут ... что, собственно, и заставит их появиться.
Решение Вопроса

Вот некоторые ссылки на различные спецификации и проекты W3C:

Селекторы Уровень 3

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

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

Авторы определяют стиль и расположение сгенерированного контента с помощью псевдоэлементов: before и: after. Как показывают их имена, псевдоэлементы: before и: after указывают местоположение контента до и после элемента.Содержимое дерева документов.'содержание» Свойство, в сочетании с этими псевдоэлементами, указывает, что вставляется.

Атрибут содержимого

Начальное:никто

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

никто -Псевдоэлемент не генерируется.

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

Если вы нене хочу повторятьсяcontent:''; несколько раз, вы можете переопределить это просто глобально стилизуя все :: before и :: after псевдоэлементы в вашем CSS (Пример JSFiddle):

::before, ::after {
    content:'';
}
 BoltClock07 мар. 2017 г., 17:34
Ах, не беспокойся!
 BoltClock03 мар. 2017 г., 06:59
И теперь ям становится массивным дежа VU Vibes - я чувствую, что яЯ уже однажды объяснил это в другом месте ... но все, что я могу найти, этоответ, который описывает, как старые браузеры обрабатывали контент: ''.
 Dave C12 июн. 2013 г., 17:01
Спасибо за ответ. Это больше похоже на то, что я искал. Тем не менее, может ли кто-нибудь придумать вариант использования для использования контента: нет на дисплее: нет? Кажется, что спецификация очень странная для этого свойства.
 BoltClock03 мар. 2017 г., 05:02
Я не рекомендую глобально включать все псевдоэлементы :: before / :: after с неквалифицированными селекторами. Если у вас очень сложные страницы, это может привести к появлению браузераутроить количество отображаемых блоков - при этом подавляющее большинство блоков сгенерированного контента никогда не используется. Есть причина, по которой начальное значение содержимого - none, а не пустая строка ...
 James Donnelly07 мар. 2017 г., 17:32
@BoltClock ах, прости, я думал, чтоЯ ответил на ваше сообщение. Я собирался сказать, что вы можете пойти дальше и ответить на него сами, как яу нас не так много времени для ТАК на данный момент.
 BoltClock04 дек. 2015 г., 04:39
display: none on :: before и :: after имеет тот же эффект, что и контент: none в любой ситуации, включая счетчики. Если ты'Если вам удобнее использовать свойство display для скрытия псевдоэлементов, вы можете сделать это. Переключение на другое свойство также может быть полезно, если проблема связана со спецификой.
 BoltClock03 мар. 2017 г., 05:08
... это, вероятно, ответ, который Дэйв искал все время. Смотрите комментарии под SLaks ' ответ. Вы хотите добавить к своему ответу или я опубликую отдельный конкретный ответ (заметьте, я сказал "Есть причина" без уточнений)?
 BoltClock07 мар. 2017 г., 17:26
Я пошел дальше и разместил ответ ниже.
 James Donnelly12 июн. 2013 г., 17:05
display:none можно использовать на этих псевдоэлементах, чтобы скрыть сгенерированный контент, не переопределяя его. Например:счетчики которые видны только когда элемент находится над которым недолжны быть восстановлены каждый раз. Вот's обновленная скрипка (наведите курсор на текст):jsfiddle.net/VzZUz/1

Причина вам нужнаcontent: '' декларация для каждого::before и / или::after псевдоэлемент, потому что начальное значениеcontent являетсяnormal, который вычисляетnone на::before а также::after псевдо-элементы. Увидетьспекуляция

Причина первоначальной стоимостиcontent ISN»t пустая строка, но значение, которое вычисляется вnone для::before а также::after псевдоэлементы, имеет два аспекта:

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

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

Наличие пустого встроенного содержимого в начале и конце каждого элемента означает, что каждый (незаменяемый) элемент - в том числеhtml а такжеbody - будет по умолчанию генерировать не одну коробку, а дотри коробки (иБольше в случае элементов, которые уже генерируют больше, чем просто основной блок, например, элементы со стилями списка). Сколько из двух дополнительных блоков на элемент вы будете использовать? Тот'потенциальноутроить Стоимость верстки очень мала.

Реально, даже в этом десятилетии, когда-либо понадобится менее 10% элементов на странице::before а также::after псевдоэлементы для макета.

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

Но тогда вы можете спросить: почему бы не иметьdisplay свойство по умолчаниюnone на::before, ::after? Просто: потому что начальное значениеdisplay не являетсяnone; этоinline, имеющийinline вычислитьnone на::before, ::,after это не вариант, потому что тогда вы никогда не сможете отобразить их в строке. Имея начальное значениеdisplay бытьnone на::before, ::after не является опцией, потому что свойство может иметь только одно начальное значение. (Вот почему начальное значениеcontent всегдаnormal и это просто определяется для вычисленияnone на::before, ::after.)

 Michael_B12 мар. 2017 г., 02:08
Другие ответы хороши, но это должен быть принятый ответ. Это полностью отвечает на вопрос.
 Michael_B12 мар. 2017 г., 02:15
Следующий вопрос будет:Посколькуcontent собственность относится только к::before а также::after псевдоэлементы, то почему его начальное значениеnormal, который автоматически вычисляетnone? Почему бы не вырезать лишний шаг и просто сделать начальное значение?none
 BoltClock12 мар. 2017 г., 04:42
@Michael_B: Я думаю, они планировали заставить контент работать с реальными элементами, прежде чем в конечном итоге отложить его до CSS3 (propdef говорит: «На элементах всегда вычисляетнормальный'." хотя собственность недля начала применимо к элементам). Установка начального значения none означает, что вся страница исчезнет ... пока вы не добавитеhtml, body, body * { content: normal } Итак, чтобы учесть CSS3 'С точки зрения определения, имеет больше смысла для нормального начального значения, которое затем вычисляется в none для :: before, :: after since "обычно" псевдо нетТ нужно вообще.

Ваш ответ на вопрос