Shrink Text on Hover using HTML and CSS

Text can be Shrinked or condensed using some HTML and CSS properties, you can use this animation in your websites as headings or sub-headings, the below sections will guide you on how to create the desired effect.

HTML Code: In this section we have simple div  element which contains the text separated with span tags.

CSS Code: In this code first we design the div  element using basic CSS  properties and then to create the shrink effect we use the nth-child() Selector and set the letter spacing to -1em when we hover over the text.

Final Code: It is the combination of the above two code sections.

Output: