从屏幕边缘到容器边缘的伪元素
发布于2021-10-23 03:22 阅读(1427) 评论(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/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力