Chrome不显示伪元素

Question

i have a problem,my code doesn't work on Chrome but is work fine in Firefox.Chrome does not show pseudo element probably like Firefox does.Here is a piece of my code.Please help and just ignore my bad English.Thank you. 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

Its because chrome applies the overflow:hidden to the <hr> element by default in user agent stylesheet. So you will need to apply overflow:visible to the <hr> element.

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