html - Chrome 不显示伪元素

Question

我有一个问题，我的代码在 Chrome 上无法运行，但在 Firefox 中运行良好。Chrome 可能不会像 Firefox 那样显示伪元素。这是我的一段代码。请帮忙，忽略我糟糕的英语。谢谢. 密码笔

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