Chrome不显示伪元素

Question

我有一个问题，我的代码在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">

Answer 1

因为Chrome在用户代理样式表中默认将overflow:hidden应用于<hr>元素。因此，您需要将overflow:visible应用于<hr>元素。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;