Css 页脚上方的图像分隔线使用：：before 伪元素

发布于04月01日

我使用的是Bootstrap(5)，页脚很简单，如下所示:

我需要的是它上面的简单除法器(上图)，加上https://jsfiddle.net/Ls1vhncx/5px.

如何使用::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>

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>

Css 页脚上方的图像分隔线使用：：before 伪元素

推荐答案

Css相关问答推荐

为什么盒影没有显示在我的Angular组件中？

当滚动到页脚时，是否可以隐藏固定元素？

我应该在哪里放置expo /Reaction本地项目的CSS重置文件？

下拉菜单未展开- bootstrap

解释 "document.styleSheets[0].cssRules[0].style;"

使元素不水平滚动

Vue.js 变量中的动态类变量

努力将 CSS 样式应用于 Elm 应用程序

Material UI Modal 因背景而变暗

antd 中的子菜单项不可滚动

为什么过渡属性不适用于 box-shadow？

如何将转换应用于相同的元素但处于不同的状态：悬停

你可以在 CSS 中扩展实体(entity)吗？

圆形加载动画

CSS 中的区域类似于 C# 区域？

控制表格单元格之间的间距

如何计算所需的色调旋转以生成特定 colored颜色？

更改 FontAwesome 图标的字体粗细？

使用 CSS go 除图像之间的空间

使用 HTML data-attribute 设置 CSS background-image url