Chrome не отображает псевдоэлемент - PullRequest
Новая
       7

Chrome не отображает псевдоэлемент

0 голосов
/ 21 мая 2018

У меня проблема, мой код не работает на Chrome, но работает нормально в Firefox. Chrome не показывает псевдоэлемент, вероятно, как Firefox. Вот часть моего кода. Пожалуйста, помогите и просто игнорируйте мой плохой английский.Спасибо. Codepen 

<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">

1 Ответ

0 голосов
/ 21 мая 2018

Это потому, что chrome применяет overflow:hidden к элементу <hr> по умолчанию в таблице стилей агента пользователя.Поэтому вам нужно применить overflow:visible к элементу <hr>.

enter image description here 

body {
  padding-top: 10rem;
  padding-left: 1rem;
  counter-reset: line 7;
}

hr {
  overflow: visible;
}

.graph__coordinate-line {
  border: 1px dashed #ccc;
  position: relative;
  width: calc(100% - 5rem);
  font-size: 1.3rem;
}

.graph__coordinate-line:not(:last-of-type) {
  margin-bottom: 2rem;
  counter-increment: line -1;
}

.graph__coordinate-line:not(:last-of-type)::after {
  content: " " counter(line) " K ";
  position: absolute;
  top: -1.5rem;
  left: -3.2rem;
}

.graph__coordinate-line:last-of-type::after {
  content: "0";
  position: absolute;
  top: -1.5rem;
  left: -3.2rem;
}

.graph__coordinate-line::before {
  content: "\2013";
  position: absolute;
  top: -1.5rem;
  left: -5rem;
}
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
<hr class="graph__coordinate-line">
...