无法在水平分隔线(HR)中添加文字且HR未显示：代码问题求助

Let's break down the issues in your code and walk through the fixes step by step:

1. Invalid Parent Selector in CSS #

You’re using & (the HTML entity for &) in your nested CSS, but in SCSS syntax (which you’re using with nested selectors), the parent selector is just &. This is the main reason your styling isn’t applying correctly.

2. Missing Background for the Horizontal Line #

Your :before pseudo-element is meant to create the horizontal line, but it has no background-color set—so it’s invisible. Adding a color here will make the line appear.

3. Possible Font Name Mismatch #

Even if you loaded the font, 'GreatVibesRegular' might not match the actual font family name. Many web fonts use spaced names (like 'Great Vibes'), so adding a fallback font will help you test if the font is the issue.

Corrected CSS Code #

.venue-hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0; /* Remove default HR border to avoid conflicts */
  font-family: 'GreatVibesRegular', 'Great Vibes', cursive; /* Add fallback fonts */
  text-align: center;
  height: 1.5em;
  opacity: 0.5;

  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: #999; /* Set your desired line color here */
  }

  &:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 0.5em;
    line-height: 1.5em;
    background-color: #fcfcfa;
  }
}

Cleaned-Up HTML #

The space around the = sign in data-content is harmless, but here’s a consistent version:

<hr class="venue-hr-text" data-content="just three steps away">

Troubleshooting Tips #

• If the font still doesn’t render, temporarily replace 'GreatVibesRegular' with cursive to confirm the text itself is working.
• Use your browser’s dev tools (Inspect Element) to check if the font is loaded correctly—look under the "Fonts" tab in the Elements panel.
• Ensure the background-color of the :after element matches your page background so the text appears to "break" the line.

内容的提问来源于stack exchange，提问作者juhi