我如何在 material-ui 中使用伪元素 ::before, ::after

Question

在mui中，使用伪元素写方法。我不知道如何使用文档，所以我 post 一个问题。

文档中提到的伪元素是：

box-sizing is set globally on the element to border-box. Every element—including *::before and *::after are declared to inherit this property, which ensures that the declared width of the element is never exceeded due to padding or border.

我不明白的就是这些。

我需要帮助。感谢阅读。

Answer 1

当我们定义一个div的宽度时，它可以包括边框宽度，也可以不包括在总宽度中。

假设我们说 -

div { width: 10px; border: 10px solid grey; box-sizing: content-box}

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

div { width: 10px; border: 10px solid grey; box-sizing: border-box}

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

每个元素无论是其子元素还是像 ::before、::after 这样的伪元素，都继承相同的 box-sizing 值，在父元素中定义。