Почему: перед и: после псевдоэлементов требуется свойство content? - программирование
Подтвердить что ты не робот

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

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

.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;
}
<div class="test"></div>
4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

: перед и: после псевдоэлементов

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

Атрибут контента

Начальное: none

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

none - Псевдоэлемент не создается.

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

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

::before, ::after {
    content:'';
}

Ответ 2

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

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

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

  • по определению псевдоклассы динамически создаются для каждого отдельного элемента, указанного разметкой HTML страницы
  • все элементы страницы, включая псевдоклассы, должны иметь свойство содержимого, которое будет отображаться.
  • HTML-элементы, такие как <p>, также работают, но вы можете быстро установить их свойство контента, используя разметку ( или с объявлениями CSS).
  • В любом случае, , в отличие от неклассовых элементов, псевдоклассы не могут быть заданы в самой разметке. ∴ Следовательно, все псевдоклассы невидимы (их свойства "content" не имеют значения) , если вы не скажете им, чтобы они не были (давая им значение объявлениям CSS).

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

<body>
<p> </p>
</body>

Мы знаем, что эта страница ничего не отобразит, потому что элемент <p> не имеет текста. Более точный способ перефразировать это состоит в том, что свойство содержимого элемента <p> не имеет значения.

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

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

Это будет отображаться при загрузке, так как свойство content элемента <p> имеет значение; это значение является строкой:

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

В качестве альтернативы мы можем вызвать элемент <p> для отображения, установив свойство содержимого элемента <p> в CSS:

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

Эти два способа ввода строки в элемент <p> идентичны.

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

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

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

Результат:

BEFORE...  P ...and AFTER

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

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

<p:before>BEFORE... </p>
<p> P </p>
<p:after> ...and AFTER</p>

Но это не так, потому что <p:before> и <p:after> не являются элементами HTML.

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

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

Ответ 3

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

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

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

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

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

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

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

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

Ответ 4

Пока вы не добавите content: ..., psuedo-элемент фактически не существует.

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