如何解决之后和之前的伪类仅在具有绝对位置时显示
我使用mixin SASS 来调用background 因为我会经常使用这段代码。我将使用后台mixin在前后创建伪类。
这是后台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。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。