Как я могу использовать псевдоэлемент :: before, :: after в material-ui

Question

В mui используйте псевдоэлемент для написания метода. Я не знаю, как использовать документы, поэтому я задаю вопрос.

Псевдоэлементы, упомянутые в документах:

Размер блока устанавливается глобально на элементе border-box. Каждый элемент, включая * :: before и * :: after, объявляется наследующим это свойство, что гарантирует, что объявленная ширина элемента никогда не будет превышена из-за заполнения или границы.

Это все, что я не понимаю.

Мне нужна помощь. Спасибо за чтение.

Answer 1

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

предположим, если мы скажем -

div {width: 10px;рамка: сплошная серая 10px;размер блока: блок содержимого}

in content-box as box-sizing, total width of div becomes 100 + 10 + 10.

div {ширина: 10px;рамка: сплошная серая 10px;box-sizing: border-box}

in border-box as box-sizing, total width remains 100px;

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