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

我试图实现一个网站（使用bootstrap4），它有一条从标题开始的渐变线，并延伸到容器的左边缘。我已经知道怎么做了，但是梯度永远不会完全显示出来。我已经创建了一个覆盖整个页面宽度的包装

div.overflow-hidden

，并且具有

overflow-x:hidden。渐变线是
：：在
h1
元素上的
伪元素之后。

是否有一个纯html/css解决方案来确保始终显示完整的渐变？标题在页面上的位置是可变的，因为它在一个容器中，我不能给伪元素一个固定的宽度，因为它取决于屏幕的分辨率。请参阅下面的代码了解我的尝试：

预期结果：



。溢出隐藏{
溢出-x：隐藏！重要；
宽度：100%；
}
.标题详情{
位置：相对位置；
显示：内联块；
}
.标题详细信息：：之后{
内容：''；
位置：绝对位置；
显示：块；
宽度：100vw；
高度：0.25雷姆；
右图：计算值（100%+2.25雷姆）；
背景图像：线性梯度（向右，rgb（72184171）0%，rgb（97157191）100%）；
最高：50%；
转化：translateY（-50%）；
}
.column-count-2{
列数：2；
柱间距：2rem；
列规则：无；
}

书名
Lorem ipsum Door sit amet，是一位杰出的领导者。这句话的意思是：“在我们的日常生活中，我们的生活是美好的。”
Lorem ipsum dolor sit amet，是一位杰出的献身者。这句话的意思是：“在我们的日常生活中，我们的生活是美好的。”

Lorem ipsum dolor sit amet，是一位杰出的献身者。这句话的意思是：“在我们的日常生活中，我们的生活是美好的。”

更新了答案

我认为这会对你有用：

刚刚更改了
。标题详细信息：：在{width:calc（（100vw-1170px）/2）-10px之后；}
对我来说效果很好。为了证明我的观点，我删除了
.overflow hidden

解释-
。标题详细信息：：在{宽度：计算（（100vw-1170px）/2）之后-
10px）；}
即。标题详细信息：：在{width:calc（（屏幕宽度）之后-
.container width[必须通过mediaquery使用
bootstrap]）/两侧边距）-处理小间隙）；}


/*。溢出隐藏{
溢出-x：隐藏！重要；
宽度：100%；
}*/
.标题详情{
位置：相对位置；
显示：内联块；
}
.标题详细信息：：之后{
内容：''；
位置：绝对位置；
显示：块；
宽度：计算（（100vw-1170px）/2）-10px）；
高度：0.25雷姆；
右图：计算值（100%+2.25雷姆）；
背景图像：线性梯度（向右，rgb（72184171）0%，rgb（97157191）100%）；
最高：50%；
转化：translateY（-50%）；
}
.column-count-2{
列数：2；
柱间距：2rem；
列规则：无；
}
@介质（最小宽度：992px）{
.标题详细信息：：之后{
宽度：计算（（100vw-970px）/2）-10px）；
}
}
@介质（最小宽度：768px）{
.标题详细信息：：之后{
宽度：计算（（100vw-750px）/2）-10px）；
}
}

书名
Lorem ipsum Door sit amet，是一位杰出的领导者。这句话的意思是：“在我们的日常生活中，我们的生活是美好的。”
Lorem ipsum dolor sit amet，是一位杰出的献身者。这句话的意思是：“在我们的日常生活中，我们的生活是美好的。”

Lorem ipsum dolor sit amet，是一位杰出的献身者。这句话的意思是：“在我们的日常生活中，我们的生活是美好的。”

我不明白实际的问题是什么。你的意思是线和容器之间有间隙吗？线的位置和它应该的位置一样，但是从开始到结束梯度都不可见。渐变线的一大块在屏幕边缘被切断。我想不出任何方法可以完全显示渐变，同时仍然使其足够灵活，可以处理所有分辨率，并且标题在页面上的任何位置都非常小，因此它看起来不像渐变，而右边的应用非常大，所以它隐藏在最左边section@charankumar这是一个梯度，一个微妙的梯度，我会给你，但它是一个梯度，必须保持梯度。对于设计师来说，这是一个非常重要的细节。谢谢你的帮助，但这并不能解决我的问题。渐变不会延伸到屏幕的边缘。@Connor确实如此。请在代码段上使用全屏，您将看到。不，它没有。看这里：。你是根据标题的宽度来计算行的宽度，而标题的宽度是可变的，取决于标题的内容有多少。@Connor请检查新的答案是否适合你，我会在那时完成所需的媒体查询。哦，没有想过在
calc（）
中使用容器宽度。非常感谢你！我可以自己解决其余的媒体问题，我不想让你经历比你需要的更多的麻烦。