填充效果不适用于特殊字符

Question

当它是一个没有空格或特殊字符的单词时，效果很好，当我添加另一个单词时，效果立即发生

Codepen

/* 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="WEB">WEB</p>
<p class="text-fill" data-text="Web Development">Web Development</p>

Answer 1

代码运行良好，我没有添加任何东西。我可能没有理解这个问题，但你可能在完成<p>段落后忘记完成data-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="An example with more text">An example with more text</p>
<p class="text-fill" data-text="Another example with more text">Another example with more text</p>

对于移动设备可能效果太慢。

• 一个带有字符的示例，可以像纯文本一样工作。

/* 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>

为了让效果不那么慢，我建议你减少文本，这样它就不会在两行中显示。