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

Question

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

文档中提到的伪元素有：

box-sizing 在元素上全局设置为边框框。每个元素——包括 *::before 和 *::after 都被声明为继承这个属性，这确保了元素的声明宽度永远不会由于填充或边框而超出。

这就是我不明白的。

我需要帮助。感谢阅读。

Answer 1

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

假设我们说 -

div { 宽度：10px;边框：10px 纯灰色； box-sizing: 内容框}

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

div { 宽度：10px;边框：10px 纯灰色； box-sizing: 边框框}

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

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