Hover псевдоэлементов при display: contents

Question

Если навести мышку на ::before или ::after элемента, к которому применён display: contents, то в хроме :hover срабатывает, а в FF и Safari - нет.

Можно ли как-то сделать, чтобы срабатывал?
А какой браузер прав? Мне кажется, что хром.

section::before, section::after {
  content: "pseudo";
  display: block;
  line-height: 2;
}

section {
  display: contents;
}

section:hover {
  color: red;
}

<section>
  <div>real</div>
</section>

Answer 1

вот в таком варианте, у меня в обоих браузерах поведение одинаковое

Кто не знает, пример на чистом css. это не LESS, sass и не scss

section {
    display: contents;
    

    &::before,
    &::after {
        content: "pseudo";
        display: block;
        line-height: 4;
    }

    &:hover {
        color: red;
        
    }
}

<section>
  <div>real</div>
</section>

Хотя странно, в документации поддержка полная и поведение должно быть одинаковым.

Answer 2

элемент к которому применен display: contents с точки зрения иерархии как кукушка "сбагривает" потомков ближайшему предку, а после прикидывается их братом. так что нет, хром скорее не прав чем прав.

учитывая что версии браузеров в вопросе не указаны, возможно у вас устаревший хром. настолько устаревший, что попросту не поддерживает display: contents(иль поддерживает, но с ошибками)

Можно ли как-то сделать, чтобы срабатывал?

раз уж псевды в таком случае не дети секции а братья(находятся рядом с ним а не в нём), надо смотреть на братскую селекцию. а это очень веселая штука:

#x > *{border: 1px solid red}
#x>*:hover ~ *{background: red;} /* кто выше триггера тот и игнорит селектор */

<div id='x'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

и да, как подметили выше - это ПСЕВДОэлементы, а не полноценные элементы, потому и результат печальный, увы...

#y{display: contents}
#y:after, #y:before{content: 'abc'; display: block;}
#x *:hover {color: red}

<div id='x'>
  <div id='y'>
  a
  </div>
</div>

самое вменяемое решение - отказ от display: contents в пользу обычного врапера.

по крайней мере мне, найти приличный способ использования contents, пока не удалось...

UPD

В какой ситуации его можно рассматривать как их брата?

вот вам GRID, развлекайтесь.

.x{
  display: grid;
  grid-template-columns: repeat(1fr, 5);
  grid-template-rows: repeat(1fr, 5);
  grid-gap: 1em;
  background: pink;
  }
.y{ /*!!!!!!!*/
  grid-column: 1;
  background: red;
  display: contents;
  border: 1px solid blue;
}
.z{display: list-item}
.z:nth-child(1){
  grid-row: 1;
  grid-column: 1 / span 6;
  background: gold;
}
.z:nth-child(4){
  grid-row: 5;
  grid-column: 1 / span 6;
  background: gold;
}
.z:nth-child(2){
  grid-column: 2;
  grid-row: 2 / span 4;
  background: green;
}
.x:hover .z:nth-child(2){display: none} /*!!!!!*/
.z:nth-child(3){
  grid-row: 2 / span 4;
  grid-column: 4;
  background: brown;
}

.y:after, .y:before, .z:after{
  content: attr(class) ' ' counter(list-item);
  background: silver;
}
.y:after{grid-column: 5; grid-row: span 3}

<div class='x'>
  <div class='y'>
    <div class='z'></div>
    <div class='z'></div>
    <div class='z'></div>
    <div class='z'></div>
    йа есть content`s
  </div>
</div>

БЛОГ НА HUSL

Hover псевдоэлементов при display: contents

Ответы (2 шт):

UPD