<ul class="grid">
	<li>
		<p>This is a very stylish <a href="#" id="style-1">link</a> that uses a box shadow.</p>	
	</li>
	<li>
		<p><a href="#" id="style-2">This one </a> uses a <code>::before</code> pseudo-element.</p>		
	</li>
	<li>
		<p>The third <a href="#" id="style-3">link style</a> also uses a pseudo-element, but it has alternating transformation origins.</p>
	</li>
	<li>
		<p>By combining two pseudo-elements, we can <a href="#" id="style-4" data-replace="get a link"><span>get a link</span></a> that looks very interesting on mouse hover.</p>
	</li>
	<li>
		<p>Our fifth entry also uses pseudo-elements and transitions <a href="#" id="style-5">multiple</a> CSS properties to achieve a cool hover effect.</p>
	</li>
	<li>
		<p>The sixth and final link style <a href="#" id="style-6">uses background gradients as bottom borders</a> and this approach allows the link to be styled on multiple lines.</p>
	</li>
</ul>

// Variables
:root {
	--link-1: #D65472;
	--link-2: #37C5F0;
	--link-3: gold;
	--text: #18272F;
	--counter: #30B67D;
}

// Reset
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
	color: var(--text);
	font-weight: 700;
	vertical-align: top;
}

// Body
body {
	padding: 1rem;
	display: flex;
	align-content: center;
	height: 100vh;
	font-size: 21px;
	line-height: 1.5;
	font-family: 'Poppins', sans-serif;
}

// Presentation grid
.grid {
	list-style: none;
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

	counter-reset: links;
	grid-gap: 1rem;
	
	li {
		border: 1px dashed rgba(0, 0, 0, .15);
		padding: 3rem;
		position: relative;
		
		&::before {
			counter-increment: links;
			content: counter(links);
			position: absolute;
			top: 0;
			left: 0;
			background-color: var(--counter);
			color: rgba(0, 0, 0, .65);
			font-size: 12px;
			padding: .5rem;
			text-transform: uppercase;
			font-weight: 700;
			letter-spacing: 1px;
			width: 1rem;
			text-align: center;
		}
	}
}

// Style 1
#style-1 {
	padding: 0 .25rem;
	margin: 0 -.25rem;
  	box-shadow: inset 0 0 0 0 var(--link-1);
  	transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
	color: var(--link-1);
  	
	&:hover {
    	color: white;
    	box-shadow: inset 100px 0 0 0 var(--link-1);
  	}
}

// Style 2
#style-2 {
	position: relative;
	transition: color .3s ease-in-out;
	
	&::before {
		content: '';
		position: absolute;
		top: 100%;
		width: 100%;
		height: 3px;
		background-color: var(--link-1);
		transform: scaleX(0);
		transition: transform .3s ease-in-out;
	}
	
	&:hover {
		color: var(--link-1);
	}
	
	&:hover::before {
		transform: scaleX(1);
	}	
}

// Style 3
#style-3 {
	position: relative;

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

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

// Style 4
#style-4 {
	overflow: hidden;
	position: relative;
	display: inline-block;
	
	&::before,
	&::after {
		content: '';
		position: absolute;
		width: 100%;
		left: 0;
	}

	&::before {
		background-color: var(--link-1);
		height: 2px;
		bottom: 0;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); // easeInOutQuart
	}

	&:hover::before {
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}

	&::after {
		content: attr(data-replace);
		height: 100%;
		top: 0;
		transform-origin: 100% 50%;
		transform: translate3d(200%, 0, 0);
		transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); // easeInOutQuart
		color: var(--link-1);
	}

	&:hover::after {
		transform: translate3d(0, 0, 0);
	}

	span {
		display: inline-block;
		transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); // easeInOutQuart
	}

	&:hover span {
		transform: translate3d(-200%, 0, 0);
	}
}

// Style 5
#style-5 {
	position: relative;
	font-weight: bold;
	
	&::before {
		content: '';
		background-color: var(--link-3);
		position: absolute;
		left: .5rem;
		bottom: 5px;
		width: 100%;
		height: 8px;
		z-index: -1;
		transition: all .3s ease-in-out;
	}
	
	&:hover::before {
		left: -5px;
		bottom: 0;
		height: 100%;
		width: calc(100% + 10px);
	}	
}

// Style 6
#style-6 {
	background-image: linear-gradient(white 50%, var(--link-2) 50%);
	background-size: auto 175%;
	transition: background .3s ease-in-out;

	&:hover {
		background-position-y: 100%;	
	}
}