Expanding linear-gradient background unaffected by div layout - html

Question

I have the following code. When you click on it (excuse the on-the-fly, inline onclick - on my page it is more properly set up), the background expands to the right.
Unfortunately as I am using a :before with display: inline-block, it is affecting the layout of the text inside.
It also is being affected by the padding property I have on the box. I could solve this by setting a negative margin: -16px on the :before element however the height of the :before element goes off:
div {
border: 1px solid teal;
height: 64px;
border-radius: 10px;
overflow: hidden;
padding: 16px;
}
div:before {
display: inline-block;
height: 100%;
width: 5%;
content: '';
background: linear-gradient(130deg, lightblue 40%, white 0%);
transition: .3s;
}
div.active:before {
width: 200%;
/* or 300% if you want the entire background to be "taken over" */
}
<div onclick="this.classList.toggle('active')">
<span>Hi! I'm text! nice to meet you!</span>
</div>
This is how I want it to look like (it looks fine here because there is no text to get in the way and no padding property - both of which I will need for my webpage):
div {
border: 1px solid teal;
height: 64px;
border-radius: 10px;
overflow: hidden;
}
div:before {
display: inline-block;
height: 100%;
width: 5%;
content: '';
background: linear-gradient(130deg, lightblue 40%, white 0%);
transition: .3s;
}
div.active:before {
width: 200%;
/* or 300% if you want the entire background to be "taken over" */
}
<div onclick="this.classList.toggle('active')">
</div>
Does anyone know how to remove a :before from the layout of a box? Ideally without using position as on my page based on some parent items to the above box, position gets a bit "funky." But if it's the only solution then so be it.

Answer 1

Simply make the background on the main element and play with background-size
div {
border: 1px solid teal;
height: 64px;
border-radius: 10px;
overflow: hidden;
padding: 16px;
background-image: linear-gradient(130deg, lightblue 40%, white 0%);
background-size:10% 100%;
background-position:left;
background-repeat:no-repeat;
transition:background 0.5s;
}
div.active{
background-size:300% 100%;
}
<div onclick="this.classList.toggle('active')">
<span>Hi! I'm text! nice to meet you!</span>
</div>

Answer 2

Not sure if this is what you're looking for:
div {
border: 1px solid teal;
height: 64px;
border-radius: 10px;
overflow: hidden;
position:relative;
}
div:before {
display: inline-block;
height: 100%;
width: 5%;
content: '';
background: linear-gradient(130deg, lightblue 40%, white 0%);
transition: .3s;
position:absolute;
}
div.active:before {
width: 200%;
/* or 300% if you want the entire background to be "taken over" */
}
div span{
position:absolute;
padding: 16px;
}
<div onclick="this.classList.toggle('active')">
<span>Hi! I'm text! nice to meet you!</span>
</div>

Answer 3

The only way to fix this without either removing the :before or using position is by adding the text to the content property of the :before,
that would result in code like:
HTML:
<div onclick="this.classList.toggle('active')"></div>
CSS:
div {
border: 1px solid teal;
height: 64px;
border-radius: 10px;
overflow: hidden;
padding: 16px;
}
div:before {
display: inline-block;
height: 100%;
width: 100%;
content: "Hi! I'm text! nice to meet you!";
background: linear-gradient(130deg, lightblue 5%, white 0%); /*Or whatever width you like*/
transition: .3s;
text-align: center;
line-height: 4;
}
div.active:before {
width: 100%;
background: linear-gradient(130deg, lightblue 75%, white 0%); /*Or whatever width you like*/
/* or 100% lightblue if you want the entire background to be "taken over" */
}
But most accessibility hard- and software is incapable of handling a :before correctly.
So why not set the background on either the div or the span?
CSS:
span {
width: 100%;
background: linear-gradient(130deg, lightblue 5%, white 0%); /*Or whatever width you like*/
transition: .3s;
text-align: center;
line-height: 4;
}
span.active {
background: linear-gradient(130deg, lightblue 75%, white 0%); /*Or whatever width you like*/
}
which results in the same background effect, with the text centered.