从屏幕边缘到容器边缘的伪元素-前端黑洞网

本站消息

站长简介/公众号

站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家，探索程序员的人生之路！分享IT最新技术，关注行业最新动向，让你永不落伍。了解同行们的工资，生活工作中的酸甜苦辣，谋求程序员的最终出路!

价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

出租广告位,需要合作请联系站长

黑洞官方问答小能手

216394

文章

108304643

访问

+关注

分类

暂无分类

日期归档

暂无数据

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

发布于2021-10-23 03:22 阅读(985) 评论(0) 点赞(19) 收藏(0)

我正在尝试实现一个网站（使用 bootstrap 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>

在这里摆弄

解决方案

更新了答案

我认为这对你有用：

刚刚改变.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[this has to handle through mediaquery with bootstrap] )/margins of both side) - 小间隙处理);}

/*.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>