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

Question

我试图实现一个网站(使用引导4)，它有一个渐变线，来自标题，并延伸到容器的左边边缘。我已经想出了如何做到这一点，但是梯度永远不会完全显示出来。我已经创建了一个包装div.overflow-hidden，它跨越整个页面的宽度，并且有overflow-x: hidden;。梯度线是::after元素上的伪元素.

是否有一个纯的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>

​

小提琴在这里

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(屏幕宽度- .container宽度-这必须通过引导的媒体查询)处理/margins)-处理的间隙很小)；}

​

/*.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中运行得很好。