The code is functioning correctly without any additional modifications. It's possible that there was a misinterpretation of the question, but it seems like the data-text attribute was not completed after wrapping the text within the paragraph tags <p>
- A demonstration featuring extended content
/* Text-fill */
.text-fill{
position: relative;
font-size: 100px;
font-weight: bolder;
-webkit-text-fill-color: white;
-webkit-text-stroke: 2px black;
transition: 0.3s;
overflow: hidden;
width: fit-content;
}
.text-fill::before{
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
-webkit-text-fill-color: cornflowerblue;
width: 0%;
overflow: hidden;
transition: 1s;
}
.text-fill:hover::before{
width: 100%;
}
<!-- text fill -->
<p class="text-fill" data-text="A demonstration featuring extended content">A demonstration featuring extended content</p>
<p class="text-fill" data-text="Another example with more text">Another example with more text</p>
The animation might be too sluggish on mobile devices.
- An illustration utilizing characters, behaves similarly to plain text.
/* Text-fill */
.text-fill{
position: relative;
font-size: 100px;
font-weight: bolder;
-webkit-text-fill-color: white;
-webkit-text-stroke: 2px black;
transition: 0.3s;
overflow: hidden;
width: fit-content;
}
.text-fill::before{
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
-webkit-text-fill-color: cornflowerblue;
width: 0%;
overflow: hidden;
transition: 1s;
}
.text-fill:hover::before{
width: 100%;
}
<!-- text fill -->
<p class="text-fill" data-text="?±!@#$%^&*">?±!@#$%^&*</p>
<p class="text-fill" data-text="水山人口刀木日月女子馬鳥目">水山人口刀木日月女子馬鳥目</p>
To enhance performance and prevent lag, consider reducing the text length to avoid displaying it on two lines.