Chrome 不显示伪元素答案

【问题标题】：Chrome does not display pseudo-elementChrome 不显示伪元素
【发布时间】：2018-10-30 21:03:13
【问题描述】：

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

【问题讨论】：

标签： html css google-chrome pseudo-element

【解决方案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">

【讨论】：