页脚上方的图像分隔符在伪元素之前使用:

Question

我正在使用Bootstrap(5(，并且有一个简单的页脚，如下所示：

我需要的是在它上面加上一个简单的分隔符(上图(，加上100px。请在此处查看小提琴：https://jsfiddle.net/Ls1vhncx/5

如何使用::before伪元素获得相同的结果，从而避免没有内容的额外div？

footer {
background: #555;
}
.img-border {
height: 100px;
width: 1920px;
background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
background-color: #555;
background-position: center;
background-attachment: fixed;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="img-border"></div>
<footer>
<div class="container">
<div class="row">
<div class="col">
<h4>Cat 1</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">A</a></li>
<li><a class="nav-link" href="#">B</a></li>
<li><a class="nav-link" href="#">C</a></li>
</ul>
</div>
<div class="col">
<h4>Cat 2</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">D</a></li>
<li><a class="nav-link" href="#">E</a></li>
<li><a class="nav-link" href="#">F</a></li>
</ul>
</div>
</div>
</div>
</footer>

Answer 1

您可以通过在页脚上设置上边距来为边框留出空间。

然后你可以在上面放一个before伪元素，它的底部为100%(即位于页脚的顶部(，宽度为100%(我认为你不需要像以前那样设置特定的px值(，高度为100px。

footer {
background: #555;
position: relative;
margin-top: 100px;
}
footer::before {
content: '';
position: absolute;
width: 100%;
height: 100px;
bottom: 100%;
left: 0;
display: inline-block;
background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
background-color: #555;
background-position: center;
background-attachment: fixed;
}

<footer>
<div class="container">
<div class="row">
<div class="col">
<h4>Cat 1</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">A</a></li>
<li><a class="nav-link" href="#">B</a></li>
<li><a class="nav-link" href="#">C</a></li>
</ul>
</div>
<div class="col">
<h4>Cat 2</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">D</a></li>
<li><a class="nav-link" href="#">E</a></li>
<li><a class="nav-link" href="#">F</a></li>
</ul>
</div>
</div>
</div>
</footer>

注意：我不清楚后台附件的使用：fixed-它似乎并没有在每个浏览器上完全实现。你需要它吗？

Answer 2

您需要的是以footer.img-border::before为目标，并将该类分配给DOM中的页脚元素。实际上，您不需要在footer.img-border上设置background-image，而是必须直接在footer.img-border::before伪元素上设置。

查看我的可复制示例以查看结果。

我确信这就是用CSS生成这个伪元素所需要的。

footer {
background: #555;
}
footer.img-border:: {
height: 100px;
width: 1920px;
background-color: #555;
background-position: center;
background-attachment: fixed;
}
footer.img-border::before {
content: "";
display: block;
width: 100%;
background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
height: 100px;
}

<footer class="img-border">
<div class="container">
<div class="row">
<div class="col">
<h4>Cat 1</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">A</a></li>
<li><a class="nav-link" href="#">B</a></li>
<li><a class="nav-link" href="#">C</a></li>
</ul>
</div>
<div class="col">
<h4>Cat 2</h4>
<ul class="nav flex-column">
<li><a class="nav-link" href="#">D</a></li>
<li><a class="nav-link" href="#">E</a></li>
<li><a class="nav-link" href="#">F</a></li>
</ul>
</div>
</div>
</div>
</footer>