Css轉換 - 從底部填充文本

Question

我有黑色文本，我希望在懸停時變成黃色。

但是我想轉換爲使文本從文本的底部到頂部填充顏色。

純CSS可能嗎？

Answer 1

1. 在data-*屬性中存儲相同的文本。
2. 將它放在與::before或::after僞元素完全相同的文本上。
3. 懸停時將其高度動畫至0。

.text { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    position: relative; 
 
    line-height: 40px; 
 
    font-size: 30px; 
 
    cursor: pointer; 
 
    margin: 20px; 
 
    color: gold; 
 
} 
 

 
.text:before { 
 
    transition: height 0.5s ease; 
 
    content: attr(data-text); 
 
    position: absolute; 
 
    overflow: hidden; 
 
    height: 40px; 
 
    color: black; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
.text:hover:before { 
 
    height: 0; 
 
}

<div class="text" data-text="Some text here">Some text here</div>