本站消息

站长简介/公众号


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

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

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


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

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

发布于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>

希望这能解决您的问题。 这在 Firefox chrome 和 safari 中运行良好。




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/208440/155abf4dca20c585a8e0/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

19 0
收藏该文
已收藏

评论内容:(最多支持255个字符)