html - 边框仅在全宽背景的一部分上

Question

我想在我的主要全宽背景标题上显示底部边框，但不在屏幕的最左侧。

全宽背景标题为 100%主体居中 1200 像素，底部边框需要延伸到页面全宽，但不能延伸到 Logo 之前的部分。

由于该网站是响应式的，因此很难不在第一部分中显示，因为这只会出现在较大的屏幕上。

#headerBackground {
  float: left;
  width: 100%;
  background-color: white;
  border-bottom: 3px solid black;
  margin-bottom: 20px;
}

#headerBackground header {
  margin: 0 auto;
  width: 1200px;
}

#logo {
  float: left;
}

<div id="headerBackground">

  <header>

    <div id="logo">
      <img src="images/logo.jpg" width="200" height="54" alt="">
    </div>

  </header>

</div>

当前设置的边框出现在整个宽度上。

Answer 1

您可以通过 <header> 的伪元素来实现元素加overflow: hidden #headerBackground 的属性(property)元素

结果(全页运行)

#headerBackground {
  float: left;
  width: 100%;
  background-color: white;
  /* border-bottom: 3px solid black; */
  margin-bottom: 20px;
  overflow: hidden;
}

#headerBackground header {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  min-height: 50px;
}

#headerBackground header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200vw;
  height: 3px;
  background: #000;
}

#logo {
  float: left;
}

<div id="headerBackground">

  <header>

    <div id="logo">
      <img src="https://picsum.photos/536/354" width="200" height="54" alt="">
    </div>

  </header>

</div>