CSS необычное использование: после

Question

Я натолкнулся на фрагмент CSS, который работает.Я хотел бы понять, почему это работает для моего собственного назидания.Мой вопрос общий по семантике использования: после в CSS.

Тема Wordpress Twenty Nineteen накладывает темный фильтр на изображения объектов, чтобы сделать (белый) текст заголовка более читабельным.Я искал способ убрать темный фильтр на изображениях определенных функций.Я нашел сообщение , в котором предлагается следующее: css:

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

Это работает угощение!

С помощью инспектора Firefox я вижу, что .site-header & .featured-imageоба класса включающего <header> элемента.Макет гибкий.

Я пытаюсь обдумать это использование: after.Мой поиск: after предполагает, что это способ добавления «контента» после элемента.В этом примере не добавляется содержимое. Вместо этого оно, похоже, изменяет / переопределяет существующее свойство.

Если я удаляю «: после», оно перестает работать, так что оно обязательно необходимо.

Может быть любымэксперт объяснит, что здесь происходит и / или укажет мне на спецификацию, которая это объясняет?

Спасибо

Answer 1

С помощью ::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 добавляет элемент after с 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>

Answer 2

То, что он действительно видит, это специфичность .

Что делает :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 предпочитает любые конфликтующие стили.