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>