仅在具有绝对位置时才显示前后的伪类[重复]答案

【问题标题】：Pseudo class after & before only display when with position absolute [duplicate]仅在具有绝对位置时才显示前后的伪类[重复]
【发布时间】：2021-04-28 17:24:27
【问题描述】：

我使用 mixin SASS 来调用后台，因为我会经常使用这段代码。我将使用背景混合在前后创建伪类。

这是后台mixin的代码：

@mixin background($height: 10%){
    content: '';
    position: absolute;
    width: 100%;
    height: $height;
    left: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

我尝试在元素前后使用伪类添加一些曲线。但是如果位置不是绝对的，曲线就不会出现。我尝试了另一个值，但它不起作用。我读了一些关于这个主题的问题，有人说这是因为绝对位置表现为块级元素。然后我尝试使用显示块和内联块而不使用位置属性，但它不起作用。我认为情况不同。

这是我的伪类的代码：

    .users::after {
        @include background(25%);
        bottom: -100px;
        background: url(../images/bg-section-bottom-mobile-2.svg) no-repeat;
    }

    .users::before {
        @include background(25%);
        top: -100px;
        background: url(../images/bg-section-top-mobile-2.svg) no-repeat;
    }

This is the deploy file in vercel

这是片段，我不知道如何添加图片文件。这不是完整的代码，只是我询问的部分

main .grow, main .conversations, main .users {
  text-align: center;
  padding: 30px;
}

main .grow img, main .conversations img, main .users img {
  width: 80%;
}

main .grow h3, main .conversations h3, main .users h3 {
  margin-top: 40px;
}

main .grow p, main .conversations p, main .users p {
  margin-top: 20px;
}

main .users, main .grow {
  background-color: #f5faff;
  margin: 150px 0px 150px 0px;
  position: relative;
}

main .grow::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 25%;
  left: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  bottom: -100px;
  background: url(../images/bg-section-bottom-mobile-1.svg) no-repeat;
}

main .grow::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 25%;
  left: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: -100px;
  background: url(../images/bg-section-top-mobile-1.svg) no-repeat;
}

<body>
  <!-- header -->
  <div class="header">
    <div class="header__logo">
      <img src="images/logo.svg" alt="logo">
    </div>
    <button class="header__btn">Try it free</button>
  </div>

  <!-- section -->
  <div class="starter">
    <h2 class="starter__title">Build The Community Your Fans Will Love</h2>
    <div class="starter__description">Huddle re-imagines the way we build communities. You have a voice, but so does 
      your audience. Create connections with your users as you engage in genuine discussion.</div>
    <button class="starter__btn">Get Started For Free</button>
    <img class="starter__illustration" src="images/screen-mockups.svg" alt="screen-mockups">
  </div>

  <!-- main -->
  <main>
    <div class="count">
      <div class="count__community">
        <img src="images/icon-communities.svg" alt="communities">
        <h1>1.4k+</h1>
        <p>Communities Formed</p>
      </div>
      <div class="count__message">
        <img src="images/icon-messages.svg" alt="messages">
        <h1>2.7m+</h1>
        <p>Message Sent</p>
      </div>
    </div>
    <div class="grow">
      <img src="images/illustration-grow-together.svg" alt="illustration-grow-together">
      <div class="grow__container">
        <h3>Grow Together</h3>
        <p>Generate meaningful discussions with your audience and build a strong, loyal community. 
        Think of the insightful conversations you miss out on with a feedback form.</p>
      </div>
    </div>
    <div class="conversations">
      <img src="images/illustration-flowing-conversation.svg" alt="illustration-flowing">
      <div class="conversations__container">
        <h3>Flowing Conversation</h3>
        <p>You wouldn't paginate a conversation in real life, so why do it online? Our threads have 
          just-in-time loading for a more natural flow.</p>
      </div>
    </div>
    <div class="users">
      <img src="images/illustration-your-users.svg" alt="illustration-users">
      <div class="users__container">
        <h3>Your Users</h3>
        <p>It takes no time at all to integrate Huddle with your app's authentication solution. This means, 
          once signed in to your app, your users can start chatting immediately.</p>
      </div>
    </div>
    <div class="action">
      <h2 class="action__title">Ready To Build Your Community</h2>
      <button class="action__btn">Get Started For Free</button>
    </div>
  </main>

  <!-- footer -->
  <footer class="footer">
    <div class="footer__newsletter">
      <h3>newsletter</h3>
      <p>To recieve tips on how to grow your community, sign up to our weekly newsletter. We’ll never 
        send you spam or pass on your email address</p>
      <form>
        <input type="text" name="email">
        <button type="submit">Subscribe</button>
      </form>
    </div>
    <div class="footer__contact">
      <div class="logo">
        <img src="images/icon-messages.svg" alt="logo">
        <h1>HADDLE</h1>
      </div>
      <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sequi culpa voluptates perferendis provident natus.</p>
      <div class="phone">
        <img src="images/icon-phone.svg" alt="phone">
        <p>Phone: +1-543-123-4567</p>
      </div>
      <div class="email">
        <img src="images/icon-email.svg" alt="email">
        <p>example@huddle.com</p>
      </div>
      <div class="sosmed">
        <div class="fb container">
          <i class="fab fa-facebook-f"></i>
        </div>
        <div class="ig">
          <i class="fab fa-instagram"></i>
        </div>
        <div class="twt container">
          <i class="fab fa-twitter"></i>
        </div>
      </div>
    </div>
  </footer>
</body>

所以问题是为什么我的伪类 after 和 before 只在我使用绝对位置时显示？是因为我使用 mixin SASS 吗？

【问题讨论】：

问题是百分比高度适用于 position:absolute 但不适用于 inline-block 或 block，因为没有为父元素设置显式高度

标签： css sass mixins pseudo-class scss-mixins

【解决方案1】：

我认为这与使用 mixin SAAS 无关，因为无论您是否使用 SAAS，您的代码都会变成 css 代码。我想问你一些事情，为什么你的 ::before 或 ::after 类的内容是空的。您是否尝试在内容中添加一些图像？喜欢内容：url（...）；你可以尝试一下没有绝对和相对。如果它不起作用，您应该提供有关您的代码的更多信息。还有this may give you some idea。

【讨论】：