Looking to customize a website design (utilizing bootstrap 4) with a gradient line that starts from the title and stretches all the way to the left edge of the container. While I have managed to set this up, the full gradient effect is not visible. To address this issue, I introduced a wrapping div.overflow-hidden that covers the entire width of the page and includes overflow-x: hidden;. The gradient line is implemented as an ::after pseudo-element attached to the h1 element.
Is there a pure HTML/CSS solution that ensures the complete gradient display at all times? The heading’s position on the page can vary, and due to its placement within a container, fixing a specific width for the pseudo-element isn’t feasible as it hinges on screen resolution. Refer to the code snippet below for my attempted solution:
Desired Outcome:
https://i.sstatic.net/DBuqD.png
.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>