css - 我如何在 material-ui 中使用伪元素::之前，::之后

Question

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

文档中提到的伪元素是:

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 值，即在父元素中定义的值。