Question

我遇到了一个工作的CSS片段。我想了解为什么它适用于我自己的教育。我的问题是关于在CSS中使用：after的语义的一般性问题。

Wordpress二十九岁主题在特征图像上放置了深色滤镜，以使（白色）标题文本更具可读性。我正在寻找一种删除特定特征图像上深色滤镜的方法。我发现有一个post提示此CSS：

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

很有效！

使用Firefox检查器，我看到.site-header和.featured-image都是封闭的<header>元素的类。布局是弹性的。

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

如果我删除'：after'，它将停止工作，因此绝对有必要。

任何善良的专家都可以解释这里发生的事情和/或为我提供一个说明它的规范吗？

谢谢

Answer 1

实际上看起来是specificity。

:after的作用是在应用了:after的元素的最后一个子元素或内容之后添加一个元素。请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/::after

这是一个粗略的例子

.featured-image {
  position:relative;
  padding:5px;
 
}

.featured-image > p {
  position: relative;
  z-index:10;
}

.featured-image:after {
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
  border: 1px solid black;
  background-color: #CCC;
  z-index:1;
}

.site-header.featured-image:after {
   background: none;
}

<div class="featured-image"><p> :after will have a background</p></div>
<div class="site-header featured-image"><p> :after wont't have a background 2</p></div>

由于.site-header.featured-image:after比.featured-image:after更具体，因此.site-header.featured-image:after优先考虑任何冲突的样式。

Answer 2

使用::after和::before，您可以添加html元素或至少模仿html元素功能的内容。

::before将放置在该元素内的所有元素之前，而::after将是最后一个元素。

举例来说，假设我们已经有了这个标记，

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

如果我们添加以下CSS，

.some-div::after,
.some-div::before {
  content: "";
  display: block;
}

它将产生此标记，

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

现在，我猜测您的Wordpress主题添加了一个background-color后元素，该元素的某个值覆盖图像。然后，通过将::after元素的背景设置为none，您可以覆盖这些样式并消除覆盖。

此代码段进一步阐述了主题中发生的情况。

.some-div {
  width: 20rem;
  height: 20rem;
}

.img {
  position: relative;
  background-color: orangered;
  width: 100%;
  height: 100%;
}

.some-div:hover .img::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: .3;
}

<div class="some-div">
  <div class="img"></div>
<div>

CSS异常使用：after

2 个答案: