// copy paste for react return ( <> <style>{` .animated-text { position: relative; display: inline-block; text-decoration: none; } .animated-text::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: blue; transform-origin: 0% 50%; transform: scaleX(0); transition: transform 0.3s ease; } .animated-text:hover::after { transform: scaleX(1); } `} </style> <p class="animated-text">Hover over this text to animate the underline.</p> </> )