Html ：：after和：：before如何处理内容以外的属性？

我一直在理解

：：before

和

：after

在

内容以外的属性上的用法时遇到问题。请参阅下面的代码示例，其中有一批代码-

.loader,
.loader:before,
.loader:after
{
  border-radius: 50%;
} 

这在英语中是什么意思<代码>边界半径

在

之前和之后什么？ 我原以为注释CSS中的部分可以帮助我通过尝试和错误来理解它，但这只会让我更加困惑。
有人能用外行术语翻译下面CSS中的

：before

和

：after

部分吗

.loader，
加载器：之前，
加载器：之后
{
边界半径：50%；
}
加载器：之前，
加载器：之后
{
位置：绝对位置；
内容：''；
}
加载器：以前{
宽度：5.2米；
高度：10.2米；
背景：#0dcecb；
边界半径：10.2米0.10米；
顶部：-0.1米；
左：-0.1米；
变换原点：5.2em 5.1em；
-webkit动画：加载2秒无限轻松1.5秒；
}
.加载器
{
字体大小：11px；
文本缩进：-9999em；
保证金：5em自动；
位置：相对位置；
宽度：10em；
高度：10公分；
盒影：插入0 1em#FFF；
-webkit转换：translateZ（0）；
}
加载器：之后
{
宽度：5.2米；
高度：10.2米；
背景：#0dcecb；
边界半径：0 10.2米10.2米0；
顶部：-0.1米；
左：5.1米；
-webkit转换源：0px 5.1em；
-webkit动画：load2s无限轻松；
}
@-webkit关键帧加载2{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧加载2{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
身体
{
背景：#0dcecb；
}

---

加载…

第二个规则集中声明了

内容
属性：

.loader，
加载器：之前，
加载器：之后
{
边界半径：50%；
}
加载器：之前，
加载器：之后
{
位置：绝对位置；
内容：''；
}
...

这里单独指定
边界半径
的原因是，作者希望将其不仅应用于伪元素，而且应用于
.loader
元素本身，正如您从选择器中看到的那样

所有
：：before
和
：：after
规则匹配相同的
.loader
元素级联，为所述
.loader
元素创建一个伪元素。由于确实指定了
content
属性，因此将呈现伪元素，并且：

伪元素的行为就像CSS中的真实元素一样，除了下面和下面描述的例外

简而言之，您拥有的内容与您的基本生成内容CSS规则没有什么不同；为了选择器的目的，作者只是选择将一些声明拆分为其他规则集

值得一提的是，如果作者没有选择拆分
边界半径
、
位置
和
内容
声明（而是每个伪元素复制一次），那么每个伪元素的CSS将是什么样的：

.loader:之前
{
边界半径：50%；
位置：绝对位置；
内容：''；
宽度：5.2米；
高度：10.2米；
背景：#0dcecb；
边界半径：10.2米0.10米；
顶部：-0.1米；
左：-0.1米；
变换原点：5.2em 5.1em；
-webkit动画：加载2秒无限轻松1.5秒；
}
加载器：之后
{
边界半径：50%；
位置：绝对位置；
内容：''；
宽度：5.2米；
高度：10.2米；
背景：#0dcecb；
边界半径：0 10.2米10.2米0；
顶部：-0.1米；
左：5.1米；
-webkit转换源：0px 5.1em；
-webkit动画：load2s无限轻松；
}
第二个规则集中声明了
内容
属性：

.loader，
加载器：之前，
加载器：之后
{
边界半径：50%；
}
加载器：之前，
加载器：之后
{
位置：绝对位置；
内容：''；
}
...

这里单独指定
边界半径
的原因是，作者希望将其不仅应用于伪元素，而且应用于
.loader
元素本身，正如您从选择器中看到的那样

所有
：：before
和
：：after
规则匹配相同的
.loader
元素级联，为所述
.loader
元素创建一个伪元素。由于确实指定了
content
属性，因此将呈现伪元素，并且：

伪元素的行为就像CSS中的真实元素一样，除了下面和下面描述的例外

简而言之，您拥有的内容与您的基本生成内容CSS规则没有什么不同；为了选择器的目的，作者只是选择将一些声明拆分为其他规则集

值得一提的是，如果作者没有选择拆分
边界半径
、
位置
和
内容
声明（而是每个伪元素复制一次），那么每个伪元素的CSS将是什么样的：

.loader:之前
{
边界半径：50%；
位置：绝对位置；
内容：''；
宽度：5.2米；
高度：10.2米；
背景：#0dcecb；
边界半径：10.2米0.10米；
顶部：-0.1米；
左：-0.1米；
变换原点：5.2em 5.1em；
-webkit动画：加载2秒无限轻松1.5秒；
}
加载器：之后
{
边界半径：50%；
位置：绝对位置；
内容：''；
宽度：5.2米；
高度：10.2米；
背景：#0dcecb；
边界半径：0 10.2米10.2米0；
顶部：-0.1米；
左：5.1米；
-webkit转换源：0px 5.1em；
-webkit动画：load2s无限轻松；
}
.element:：before
和
.element:：after
是可以表示实际元素（如果需要）或插入内容（或两者兼而有之）的元素

您可以想象它的工作原理如下：

<div>
<element BEFORE></element>
.. div content ..
<element AFTER></element>
</div>


.. div内容。。

您的示例是学习这些元素的一种糟糕的方式，因为它的使用非常高级

Whe