Is there a way to make the background of a span element stretch to the full width of its parent container?
Just to Clarify
I understand that using divs is an option, but it feels more like a workaround than a genuine solution to the issue.
(divs seem more like a temporary fix rather than a permanent solution)
It needs to be something similar to a span in terms of text flow.
It should be contained within a pre tag.
Desired Structure
<div>
<pre>
text text text <span> text text
text text </span>
</pre>
</div>
Current Setup
div {
width: 100%;
background: rgba(54, 188, 255, 0.05);
color: #515D6F;
}
.one {
background: rgba(54, 188, 255, 0.15);
color: rgba(54, 188, 255, 1);
}<div>
<pre>
Here is something<span class="one"> hello
there
how are you
are you
are you
are you</span>
Here is something else
</pre>
</div>Desired Outcome
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
background: rgba(54, 188, 255, 0.05);
color: #515D6F;
}
.one {
background: rgba(54, 188, 255, 0.15);
color: rgba(54, 188, 255, 1);
position: absolute;
right: 0;
width: calc(100% - 133px);
}
.left {
width: 140px;
position: absolute;
}
.demo {
color: rgba(54, 188, 255, 1);
background: rgba(54, 188, 255, 0.15);
}<div class="container">
<pre>
<div class="left">Here is something</div><div class="one right"> hello</div>
<div class="demo">
there
how are you
are you
are you
are you</div>
Here is something else
</pre>
</div>