Question

我正在尝试实现一个网站（使用引导程序4），该网站的标题具有渐变线，并延伸到容器的左边缘。我已经知道如何做到这一点，但是渐变永远不会完整显示。我创建了一个包装div.overflow-hidden，该包装跨越页面的整个宽度，并具有overflow-x: hidden;。渐变线是::after元素上的h1伪元素。
是否有纯html / css解决方案来确保始终显示完整渐变？页面上标题的位置是可变的，并且由于它在容器中，因此我不能给伪元素定一个固定的宽度，因为它取决于屏幕的分辨率。请参阅下面的代码以尝试此操作：
预期结果：

.overflow-hidden {
  overflow-x: hidden!important;
  width: 100%;
}

.title-detail {
  position: relative;
  display: inline-block;
}

.title-detail::after {
  content: '';
  position: absolute;
  display: block;
  width: 100vw;
  height: 0.25rem;
  right: calc(100% + 2.25rem);
  background-image: linear-gradient(to right, rgb(72, 184, 171) 0%, rgb(97, 157, 191) 100%);
  top: 50%;
  transform: translateY(-50%);
}

.column-count-2 {
  column-count: 2;
  column-gap: 2rem;
  column-rule: none;
}

<div class="overflow-hidden">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-10 col-xl-8">
        <h1 class="title-detail">title of page</h1>
        <div class="column-count-2">
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, lacinia sed erat vitae, dictum ullamcorper urna.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, lacinia sed erat vitae, dictum ullamcorper urna.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, lacinia sed erat vitae, dictum ullamcorper urna.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Fiddle here

Answer 1

更新了答案

我认为这对您有用：

只需更改.title-detail::after {width: calc(((100vw - 1170px)/2) - 10px);}，它对我来说就很好了。为了证明我的观点，我删除了.overflow-hidden。

说明-.title-detail::after {width: calc(((100vw - 1170px)/2) - 10px);}，即 .title-detail :: after {width：calc（（（（Screen Width- .container width [必须通过mediaquery使用 bootstrap]）/双方的边距）-处理较小的间隙）；}

/*.overflow-hidden {
  overflow-x: hidden!important;
  width: 100%;
}*/

.title-detail {
  position: relative;
  display: inline-block;
}

.title-detail::after {
  content: '';
  position: absolute;
  display: block;
  width: calc(((100vw - 1170px)/2) - 10px);
  height: 0.25rem;
  right: calc(100% + 2.25rem);
  background-image: linear-gradient(to right, rgb(72, 184, 171) 0%, rgb(97, 157, 191) 100%);
  top: 50%;
  transform: translateY(-50%);
}

.column-count-2 {
  column-count: 2;
  column-gap: 2rem;
  column-rule: none;
}

@media (min-width: 992px) {
  .title-detail::after {
    width: calc(((100vw - 970px)/2) - 10px);
  }
}

@media (min-width: 768px) {
  .title-detail::after {
    width: calc(((100vw - 750px)/2) - 10px);
  }
}

<!-- Bootstrap core CSS -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">

<div class="overflow-hidden">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-10 col-xl-8">
        <h1 class="title-detail">title of page</h1>
        <div class="column-count-2">
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, lacinia sed erat vitae, dictum ullamcorper urna.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, lacinia sed erat vitae, dictum ullamcorper urna.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, lacinia sed erat vitae, dictum ullamcorper urna.</p>
        </div>
      </div>
    </div>
  </div>
</div>

希望这可以解决您的问题。 这在Firefox chrome和safari中很好用。

从屏幕边缘到容器边缘的伪元素

1 个答案: