:: после селектора влияет на другой :: после селектора - это ошибка? - PullRequest
Новая
       30

:: после селектора влияет на другой :: после селектора - это ошибка?

0 голосов
/ 15 декабря 2018

Эта проблема кажется супер странной.Я использую селектор :: after, чтобы добавить золотую линию под заголовком, но это также влияет на div градиента непрозрачности (желтый div) и добавляет черную линию к нижней части div.Снимок экрана: enter image description here

jsfiddle: http://jsfiddle.net/6jn4yvuq/

Мой HTML и CSS: 

.audio-caption-background {
  background-color: black;
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  z-index: 2;
  mix-blend-mode: hard-light;
}

.audio-caption-background::after {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, transparent, yellow);
  border: none;
}

.page-title {
  text-align: center;
  margin: 0 auto;
  color: rgb(77, 77, 77);
}

.page-title::after {
  display: block;
  content: "";
  background-color: #CC9752;
  height: 3px;
  width: 70px;
}
<div class="container">
  <div class="row">
    <h1 class="page-title">TITLE</h1>
  </div>
  <div class="col-lg-6">
    <div class="audio-caption-background">
    </div>
  </div>
</div>

В ту минуту, когда я удаляю класс .page-title, черная граница под желтым div исчезла.Кроме того, если я удаляю классы начальной загрузки, это тоже решает проблему.Это почему?Мне не нравится черная граница под желтым окном.

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Другой вариант - просто добавить border-bottom: 3px solid yellow; к заголовку вместо использования ::after для выполнения той же работы.Вы можете устранить ::after, немного повредив свой border-bottom.

0 голосов
/ 15 декабря 2018

Я исправил проблему, изменив width и height из .audio-caption-background::after на calc(100% + 1px) и добавив overflow: hidden в .audio-caption-background.

Вы также можете удалить .audio-caption-background::after css и просто вставить background: linear-gradient(to right, black, yellow); в .audio-caption-background.

...