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

Question

我一直无法理解 ::before 和 ::after 在 content 以外的属性上的使用。请看下面的代码示例，有这批代码 -

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

这在英语中是什么意思？ border-radius before 和 after 什么？我认为注释掉 CSS 中的部分将帮助我通过反复试验来理解它，但这只会让我更加困惑。
有人可以只翻译下面 CSS 中的 :before 和 :after 部分吗？

.loader,
.loader:before,
.loader:after 
{
  border-radius: 50%;
}
.loader:before,
.loader:after 
{
  position: absolute;
  content: '';
}
.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #0dcecb;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
}
.loader 
{
  font-size: 11px;
  text-indent: -99999em;
  margin: 5em auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em #FFF;
  -webkit-transform: translateZ(0);
}
.loader:after 
{
  width: 5.2em;
  height: 10.2em;
  background: #0dcecb;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

body
{
   background: #0dcecb;
}

<div class="loader">Loading...</div>

Answer 1

content 属性在第二个规则集中声明：

.loader,
.loader:before,
.loader:after 
{
  border-radius: 50%;
}
.loader:before,
.loader:after 
{
  position: absolute;
  content: '';
}
...

之所以在这里单独指定border-radius，是因为作者不仅要将其应用到伪元素，还要应用到.loader元素本身，从中可以看出选择器。

所有匹配相同 .loader 元素的 ::before 和 ::after 规则级联，为所述 .loader 元素创建每个伪元素之一。由于是确实指定了 content 属性，伪元素将被渲染，并且 all of the other properties applying to the pseudo-elements will take effect where applicable:

Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.

简而言之，你所拥有的与你的基本生成内容CSS规则没有区别；出于选择器的目的，作者只是选择将一些声明拆分为其他规则集。

如果作者没有选择拆分 border-radius、position 和 [=12=，每个伪元素的 CSS 会是什么样子？ ] 声明（并为每个伪元素复制一次）：

.loader:before
{
  border-radius: 50%;

  position: absolute;
  content: '';

  width: 5.2em;
  height: 10.2em;
  background: #0dcecb;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
}

.loader:after 
{
  border-radius: 50%;

  position: absolute;
  content: '';

  width: 5.2em;
  height: 10.2em;
  background: #0dcecb;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
}

Answer 2

.element::before 和 .element::after 是 Pseudo-elements，如果需要，可以表示实际元素，或插入内容（或两者）。

你可以想象它是这样工作的：

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

你的示例是一种必须了解这些元素的糟糕方法，因为它是非常高级的用法。

在将 border-radius 应用于这些元素的情况下，就像您将其应用于任何其他元素一样。如果它有宽度、大小和一些外观（如背景颜色），您会看到应用了边框半径。

Answer 3

:before和:after是DOM中没有的伪元素（也就是说你不能点击它们），但是你可以通过[=27=使用它们]. content 是必需的 并且通常只设置为空字符串。这些元素可以用作 div extends 元素边界的正常 div。请参阅下面的示例

.my-div {
  height: 20px;
  width: 300px;
  border: 5px solid #454545;
  margin: 0 auto;
  position: relative;
  /* used to position :before and :after elements as they are absolute positioned */
}
.my-div:before {
  content: '<';
  background-color: red;
  position: absolute;
  left: -20px;
  top: 0;
  display: block;
  width: 20px;
  height: 100%;
  color: white;
  font-weight: bold;
  text-align: center;
}
.my-div:after {
  content: '>';
  background-color: green;
  position: absolute;
  right: -20px;
  top: 0;
  display: block;
  width: 20px;
  height: 100%;
  color: white;
  font-weight: bold;
  text-align: center;
}

<div class='my-div'>CONTENT</div>

Answer 4

:before 和 :after 用于在内容之前或之后添加一些内容。特别是如果我们想要 "Call" 之前的 Mobile 图标，我们可以通过两种方式使用它：

1 <div><span class="ico"></span><span>Call</span></div> 现在到 .ico{ // 我们为背景写 css，给出图标的 link 及其背景大小宽度高度属性。 }

其他方法是通过 :before。 <div><span>Call</span></div>

div span:before{ // 这将包含内容："" ，而不是所有具有绝对位置和左上角值的背景属性。} 因此，在 before 的帮助下，我们不必编写额外的 html 标记。同样适用于 :after 标签

由于您的 CSS 在 after 之前向正文添加边框，因此看起来会很乱。 before 和 after 需要适当的内容：“”，它可以是空白或我们希望出现在正文之前的任何值。像箭头，点等

希望这个解释对您有所帮助。

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

How does ::after and ::before work on properties other than content?

html

css

pseudo-element