Chrome无法显示伪元素求助：代码在Firefox正常运行

Hey there! Let's figure out why your <hr class="graph__coordinate-line"> pseudo-elements are behaving differently across browsers. This is a common cross-browser quirk, and we can fix it with a few targeted checks and adjustments.

Common Culprits & Fixes #

First, let's walk through the most likely issues and how to resolve them:

1. Missing content Property
   Chrome strictly enforces the CSS standard here: pseudo-elements (::before/::after) won't render at all unless you explicitly set content: '' (even if it's empty). Firefox is a bit more lenient, which is why it works there.
   Add this to your pseudo-element CSS:

   .graph__coordinate-line::before { /* or ::after, depending on your code */
     content: '';
     /* your existing styles */
   }
   

2. Default <hr> Styles Interfering
   Chrome applies different default styles to <hr> elements compared to Firefox—things like borders, height, and margins can cover up your pseudo-element. Reset these styles to eliminate conflicts:

   .graph__coordinate-line {
     position: relative; /* Needed if your pseudo-element uses absolute positioning */
     border: none; /* Remove default border */
     height: 0; /* Reset default height to avoid space issues */
     margin: 1rem 0; /* Adjust as needed for your layout */
   }
   

3. Pseudo-Element Display & Positioning
   Ensure your pseudo-element has a valid display value (like block, inline-block, or absolute) so it takes up space. If you're using absolute positioning, double-check that the parent <hr> has position: relative (as shown above) to anchor the pseudo-element correctly.

Example Full CSS Adjustment #

Here's a combined example to put it all together:

.graph__coordinate-line {
  position: relative;
  border: none;
  height: 0;
  margin: 1.5rem 0;
}

.graph__coordinate-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #2d3748; /* Replace with your desired color */
  /* Add any other styles like dashed borders, offsets, etc. */
}

Quick Test #

After making these changes, refresh Chrome—your pseudo-elements should now render consistently with Firefox. If you're still having issues, check for conflicting CSS rules (like z-index values that might be hiding the pseudo-element) or browser-specific prefixes (though modern browsers rarely need them for pseudo-elements now).

内容的提问来源于stack exchange，提问作者LocV's Nest