Необычное использование CSS :after
Я наткнулся на фрагмент CSS, который работает. Я хотел бы понять, почему это работает для моего собственного назидания. У меня общий вопрос о семантике использования :after в CSS.
Тема Wordpress Twenty Nineteen накладывает темный фильтр на изображения функций, чтобы сделать (белый) текст заголовка более читаемым. Я искал способ удалить темный фильтр на определенных изображениях. Я нашел Почта, который предлагает этот css:
.site-header.featured-image:after {
background: none;
}
Это работает удовольствие!
Используя инспектор Firefox, я вижу, что .site-header и .featured-image являются классами включающего элемента <header>. Макет гибкий.
Я пытаюсь понять это использование :after. Мой поиск :after предполагает, что это способ добавления «контента» после элемента. В этом примере не добавляется контент... вместо этого он, похоже, изменяет/переопределяет существующее свойство.
Если я уберу ':after', он перестанет работать, так что это определенно необходимо.
Может ли какой-нибудь эксперт объяснить, что здесь происходит, и/или указать мне спецификацию, которая объясняет это?
Спасибо
Мой вопрос носит более общий характер. У меня нет работающего сайта, демонстрирующего проблему, на которую я могу указать в настоящее время. Я отредактировал вопрос, надеюсь, чтобы сделать мой вопрос более ясным.
Вы можете использовать службы фрагментов кода, такие как CodePen, даже StackOverflow позволяет вставлять фрагменты кода, которые выполняются. Но для ясности и понимания того, чего вы пытаетесь достичь, лучше всего предоставить попытку, которую вы предприняли, и каков ожидаемый результат. В противном случае вы можете получить минусы на свой вопрос.
Псевдоэлемент ::after, безусловно, создает контейнер типа block, который покрывает упомянутое изображение. На самом деле это не «контент», а просто прямоугольник с прозрачным фоном. Чтобы мы могли работать с более точной догадкой, вы должны проверить, что с помощью Firefox псевдоэлементы ::before и ::after видны в дереве элементов. Покажи нам, что ты там видишь!
Ответы 2
То, что он на самом деле видит, это специфичность.
Что делает :after, так это добавляет элемент после последнего дочернего элемента или содержимого элемента, к которому применяется :after. См.: https://developer.mozilla.org/en-US/docs/Web/CSS/::после
Вот грубый пример
.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 отдает предпочтение любым конфликтующим стилям.
Спасибо. Это отличный пример, объясняющий то, что я вижу, и иллюстрирующий правило специфичности... и то, как вы модифицируете уже существующий псевдоэлемент. Ваше здоровье
С помощью ::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>о, отлично.. спасибо.. это то, чего мне не хватало.. Теперь я понимаю, что css в моем примере модифицировал псевдоэлемент уже существующий.. и это также объясняет ::before и ::after, которые я вижу в инспектор кода браузера
Пожалуйста, отредактируйте вопрос, чтобы показать, что вы пробовали, чтобы проиллюстрировать конкретное препятствие, с которым вы столкнулись в Минимальный, полный и проверяемый пример. Для получения дополнительной информации см. Как спросить и возьмите тур.