Hotodogo | Snippets: Hover Effect 005

*, *::before, *::after {
	outline: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	background: white;
	height: 100vh;
	width: 100vw;
	font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT, monospace, cursive, serif, sans-serif;
	font-size: 20px;
	font-weight: normal;
	color: black;
	line-height: 1.2;
}

CSS Before Head

HTML Head

a {
    color: #18272F;
    position: relative;
    text-decoration: none;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

/* Presentational Styles */
body {
    display: grid;
    font-family: 'Poppins', sans-serif;
    font-size: 27px;
    font-weight: 700;
    height: 100vh;
    place-items: center;
}

CSS After Head

JS Before HTML Body

<a href="#">Hover this link</a>

HTML Body

HTML Foot

JS After HTML Body