之后和之前的伪类仅在具有绝对位置时显示

问题描述

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

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

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

这是我的伪类的代码：

    .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

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

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？

解决方法

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

mixins mixins pseudo-class sass sass scss-mixins

之后和之前的伪类仅在具有绝对位置时显示

问题描述

解决方法

相关问答