Chrome 不显示伪元素

Question

我有一个问题，我的代码在 Chrome 上不起作用，但在 Firefox.Chrome 上工作正常不显示可能像 Firefox 这样的伪元素 does.Here 是我的一部分code.Please 帮忙，别理我的坏 English.Thank 你。 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> 元素。

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: "13";
  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">

Chrome 不显示伪元素

Chrome does not display pseudo-element

html

css

google-chrome

pseudo-element