CSS异常使用：after

我遇到了一个可以工作的CSS片段。我想了解为什么它对我自己有启发作用。我的问题是关于CSS中使用：after的语义的一般性问题

Wordpress Twenty-1919主题在功能图像上放置了一个黑色过滤器，以使（白色）标题文本更具可读性。 我正在寻找一种方法来去除特定特征图像上的暗滤镜。 我发现了一个建议如下的css：

.site-header.featured-image:after {
   background: none;
}

这是一种享受

使用Firefox inspector，我看到.site header和.featured image都是一个封闭的

元素。布局是灵活的

我正试图弄明白：after这个用法。我对：after的搜索表明，这是一种在元素之后添加“内容”的方法。此示例不添加任何内容。。相反，它似乎在修改/覆盖现有属性

如果我删除“：after”，它将停止工作，因此这是绝对必要的

有哪位专家能解释一下这里发生了什么和/或给我指一个说明它的规范吗

---

谢谢你

它实际上看到的是什么

：after

所做的是在应用

：after

的元素的最后一个子元素或内容之后添加一个元素。见：

这里有一个粗略的例子

。特色图片{
位置：相对位置；
填充物：5px；
}
.特色图片>p{
位置：相对位置；
z指数：10；
}
.特色图片：之后{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
内容：''；
边框：1px纯黑；
背景色：#CCC；
z指数：1；
}
.站点标题。特色图片：之后{
背景：无；
}

：之后将有一个背景

：after不会有背景2

它实际上看起来看到的是什么

：after

所做的是在应用

：after

的元素的最后一个子元素或内容之后添加一个元素。见：

这里有一个粗略的例子

。特色图片{
位置：相对位置；
填充物：5px；
}
.特色图片>p{
位置：相对位置；
z指数：10；
}
.特色图片：之后{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
内容：''；
边框：1px纯黑；
背景色：#CCC；
z指数：1；
}
.站点标题。特色图片：之后{
背景：无；
}

：之后将有一个背景

：after不会有背景2

和

：：after

和

：：before

您可以添加html元素或至少是模仿html元素功能的内容

：：before

将放在元素内所有元素的前面，

：：after

将是最后一个元素

例如，假设我们已经有了这个标记

<div class="some-div">
  <h1>some text</h1>
  <div>Another div</div>
  <!-- bunch of other elements -->
</div>

<div class="some-div">
  ::before
  <h1>some text</h1>
  <div>Another div</div>
  <!-- bunch of other elements -->
  ::after
</div>

它将导致此标记

<div class="some-div">
  <h1>some text</h1>
  <div>Another div</div>
  <!-- bunch of other elements -->
</div>

<div class="some-div">
  ::before
  <h1>some text</h1>
  <div>Another div</div>
  <!-- bunch of other elements -->
  ::after
</div>

---

使用

：：在

之后和

：：在

之前，您可以添加html元素，或者至少添加一些模仿html元素功能的内容

：：before

将放在元素内所有元素的前面，

：：after

将是最后一个元素

例如，假设我们已经有了这个标记

<div class="some-div">
  <h1>some text</h1>
  <div>Another div</div>
  <!-- bunch of other elements -->
</div>

<div class="some-div">
  ::before
  <h1>some text</h1>
  <div>Another div</div>
  <!-- bunch of other elements -->
  ::after
</div>

它将导致此标记

<div class="some-div">
  <h1>some text</h1>
  <div>Another div</div>
  <!-- bunch of other elements -->
</div>

<div class="some-div">
  ::before
  <h1>some text</h1>
  <div>Another div</div>
  <!-- bunch of other elements -->
  ::after
</div>

请编辑问题以显示您尝试过的内容，从而说明您在考试中遇到的具体障碍。有关更多信息，请参阅并回答。我的问题更一般。我没有一个现场的网站来证明我现在可以指出的问题。我已经编辑了这个问题，希望能让我的问题更清楚。你可以使用代码段服务，比如CodePen，甚至StackOverflow允许插入运行的代码段。但是，为了清晰和理解您试图实现的目标，最好是提供您所做的尝试以及预期的结果。否则，您可能会对您的问题投反对票。

：：after

伪元素肯定会创建一个

块

类型容器来覆盖所提到的图像。它不是真正的“内容”，只是一个带有透明背景色的矩形。为了让我们更好地猜测，您应该使用firefox检查，伪元素

：before

和

：：after

在元素树中可见。让我们看看你在那里看到了什么！请编辑问题以显示您已尝试的内容，以便说明您在考试中遇到的具体障碍。有关更多信息，请参阅并回答。我的问题更一般。我没有一个现场的网站来证明我现在可以指出的问题。我已经编辑了这个问题，希望能让我的问题更清楚。你可以使用代码段服务，比如CodePen，甚至StackOverflow允许插入运行的代码段。但是，为了清晰和理解您试图实现的目标，最好是提供您所做的尝试以及预期的结果。否则，您可能会对您的问题投反对票。

：：after

伪元素肯定会创建一个

块

类型容器来覆盖所提到的图像。它不是真正的“内容”，只是一个带有透明背景色的矩形。为了让我们更好地猜测，您应该使用firefox检查，伪元素

：before

和

：：after

在元素树中可见。让我们看看你在那里看到了什么！啊，太好了。。非常感谢。这是我丢失的那块。。现在我知道我的示例中的css正在修改一个已经存在的伪元素。。这也解释了我在浏览器代码检查器中看到的

：：before

和

：：after

。。非常感谢。这是我丢失的那块。。现在我知道我的示例中的css正在修改一个已经存在的伪元素。。这也解释了我在中的浏览器代码中看到的

：：before

和

：：after