For website
unknown
html
a month ago
951 B
1
Indexable
Never
.underline-hover { position: relative; display: inline-block; } .underline-hover::after { content: ''; position: absolute; width: 100%; transform: scaleX(1); /* Line is visible initially */ height: 2px; bottom: -7px; /* Space between text and underline */ left: 0; background-color: #F0F2F4; /* Change this to your desired color */ opacity: 0.25; /* Initial 25% opacity */ transform-origin: bottom right; transition: transform 0.25s ease-out, opacity 0.25s ease-out; } .underline-hover:hover::after { transform: scaleX(1); /* Line slides into view */ opacity: 1; /* Full opacity on hover */ transform-origin: bottom left; transition: transform 0.25s ease-out, opacity 0.25s ease-out; } .underline-hover:hover::after { transform: scaleX(0); /* Line slides back when cursor is removed */ opacity: 0.25; /* Reset opacity on hover out */ transform-origin: bottom right; }
Leave a Comment